javascript - How to get word under cursor using AngularJS? -
i need feature in application using angularjs, each word gets displayed on move of cursor above it? grab paragraph dynamically generated ng-bind , need see each word move hover
<p>each word wrapped in span.</p> <p ng-bind="myparagraph"></p> word: <span id="word"></span> $('p').each(function() { var $this = $(this); $this.html($this.text().replace(/\b(\w+)\b/g, "<span>$1</span>")); }); // bind each span $('p span').hover( function() { $('#word').text($(this).css('background-color','#ffff66').text()); }, function() { $('#word').text(''); $(this).css('background-color',''); } ); http://jsfiddle.net/5gyrx/
use directive:
var app = angular.module('plunker', []); app.controller('mainctrl', function($scope) { $scope.model = { word: "", paragraph1: "each word wrapped in span.", paragraph2: "a sec paragraph here." }; }); app.directive('wordundercursor', function() { homecoming { scope: { wordundercursor: "=", wordundercursorcontent: "=" }, link: function(scope, elment) { scope.$watch('wordundercursorcontent', function(newvalue) { console.log(newvalue); if (newvalue) { var $element = $(elment); $element.html(newvalue.replace(/\b(\w+)\b/g, "<span>$1</span>")); $element.find('span').hover( function() { var $span = $(this); $span.css('background-color', '#ffff66'); scope.$apply(function() { scope.wordundercursor = $span.text(); }); }, function() { var $span = $(this); $span.css('background-color', ''); scope.$apply(function() { scope.wordundercursor = ""; }); } ); } }); } } }); html:
<body ng-controller="mainctrl"> paragraph 1: <input type="text" ng-model="model.paragraph1"></input> <br /> paragraph 2: <input type="text" ng-model="model.paragraph2"></input> <p word-under-cursor="model.word" word-under-cursor-content="model.paragraph1"></p> <p word-under-cursor="model.word" word-under-cursor-content="model.paragraph2"></p> word: {{model.word}} </body> http://plnkr.co/edit/vrwcdxhtefm7a4au1ago?p=preview
javascript jquery html5 angularjs
No comments:
Post a Comment