角度 - 倾听变化的聆听

guy*_*abi 5 angularjs angularjs-directive

我有一个简单的指令

angular.module('myApp')
    .directive('myDirective', function () {
        return {
            template: '<p ng-transclude></p>',
            restrict: 'A',
            transclude: true,
            link: function postLink(scope, element, attrs) {
            }
        }
    }
);
Run Code Online (Sandbox Code Playgroud)

我试图在每次翻译内容更改并呈现指令时运行代码 - 我需要翻译的内容.

我想在这种情况下运行的算法示例是:

  • 计算被抄内容的词.

我试过scope.$watch多种形式,但无济于事.

Kay*_*ave 11

我们可以在一个监视表达式函数中使用Angular中包含的jqlite来实现这一点.下面是使用jqLit​​e(element.text().length)监视transcluded元素长度的代码.只要附加了该指令的元素的长度发生变化,手表就会触发.

并且新长度传递newValue给手表中的第二个功能(因为我们从第一个手表功能返回它).

  myApp.directive('myDirective', function () {
     return {
        template: '<p ng-transclude></p>',
        restrict: 'A',
        transclude: true,
        replace: true,
        link: function (scope, element, attrs) {

           scope.$watch(function () {
               return element.text().length;
           },

           function (newValue, oldValue) {
               console.log('New Length ', newValue);
          });
        }
      }
  });
Run Code Online (Sandbox Code Playgroud)

我在这里有一个工作的jsfiddle:

http://jsfiddle.net/2erbF/6/

这解决了单词/字母计数方案.但是element.text()如果你需要它来解决任何变化,你可以自己编写一个测试 - 而不仅仅是长度变化.