angularjs - angular - 聆听嵌入的变化

Question

我有一个简单的指令

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

每次嵌入内容更改并呈现指令时，我都尝试运行代码 - 我需要嵌入的内容。

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

• 计算嵌入内容的字数。

我尝试scope.$watch了多种形式，但无济于事。

Answer 1

我们可以在监视表达式函数中使用 Angular 中包含的 jqlite 来完成此操作。下面是使用 jqLit​​e (element.text().length) 观察转入元素长度的代码。只要该指令附加到的元素的长度发生变化，手表就会触发。

并且新的长度被传递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);
          });
        }
      }
  });

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

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

这解决了单词/字母计数场景。element.text()但是，如果您需要它来触发任何更改（而不仅仅是长度更改），您可以在其自身上编写一个测试。