Javascript 如何使用AngularJS获取光标下的单词？_Javascript_Jquery_Html_Angularjs

Javascript 如何使用AngularJS获取光标下的单词？

javascript jquery html angularjs

Javascript 如何使用AngularJS获取光标下的单词？,javascript,jquery,html,angularjs,Javascript,Jquery,Html,Angularjs,我需要在我的应用程序中使用angularJS获得这个特性，这样每个单词都可以在光标移动时显示出来？需要注意的是，段落是由ng bind动态生成的，我需要使用移动悬停来查看每个单词 Each word will be wrapped in a span. Word: $('p').each(fu

我需要在我的应用程序中使用angularJS获得这个特性，这样每个单词都可以在光标移动时显示出来？需要注意的是，段落是由ng bind动态生成的，我需要使用移动悬停来查看每个单词

<p>Each word will be wrapped in a 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 to each span
    $('p span').hover(
        function() { $('#word').text($(this).css('background-color','#ffff66').text()); },
        function() { $('#word').text(''); $(this).css('background-color',''); }
    );

每个单词将被包装在一个span中

字：
$（'p'）。每个（函数（）{
var$this=$（this）；
$this.html（$this.text（）.replace（/\b（\w+）\b/g，“$1”）；
});
//绑定到每个跨度
$（'p span'）。悬停(
函数（）{$（'#word'）.text（$（this）.css（'background-color'，'#ffff66'）.text（）），
function（）{$（'#word'）.text（''）；$（this.css（'background-color'，''）；}
);

使用指令：

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.model = {
    word: "",
    paragraph1: "Each word will be wrapped in a span.",
    paragraph2: "A second paragraph here."
  };
});


app.directive('wordUnderCursor', function() {
  return {
    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 = "";
              });
            }
          );
        }
      });
    }
  }
});

var-app=angular.module（'plunker'，[]）；
应用程序控制器（'MainCtrl'，函数（$scope）{
$scope.model={
字：“，
第1段：“每一个单词将被包裹在一个空格中。”，
第2段：“这里是第二段。”
};
});
app.directive（'wordundersor'，function（）{
返回{
范围：{
WordUnderCorsor:“=”，
WordUnderCorContent:“=”
},
链接：功能（范围，elment）{
作用域：$watch（'wordundersorcontent'，函数（newValue）{
console.log（newValue）；
如果（新值）{
变量$element=$（elment）；
$element.html（newValue.replace（/\b（\w+）\b/g，“$1”）；
$element.find（'span'）。悬停(
函数（）{
变量$span=$（本）；
$span.css（'background-color'，'#ffff66'）；
作用域$apply（函数（）{
scope.wordundersor=$span.text（）；
});
},
函数（）{
变量$span=$（本）；
$span.css（'background-color'，''）；
作用域$apply（函数（）{
scope.wordundersor=“”；
});
}
);
}
});
}
}
});

html:


第1款：


第2段：


单词：{{model.Word}

您已经有了代码，只需将其包装到指令中即可。我的段落内容是动态的……那么我如何才能使它适用于类似这样的内容：

@user3595524我更新了我的plunker使其具有动态性

   <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>