javascript – ng-bind在我的指令之后发生,所以我没有值

我有一个带有ng-bind指令的div元素:

<div ng-bind="sometext"></div>

我有一个指令,它获取一个元素,检查它的值/文本,并根据内容为元素添加颜色.我正在使用这个指令:

<div ng-bind="sometext" my-directive></div>

问题是,在指令执行时,div上没有值或文本,因为ng-bind尚未发生.
我正在使用element.text()获取文本.
知道如何在我的指令中提供文本吗?

编辑2

另一种选择是使用ng-class或ng-style来更改文本的颜色.那么你根本不必创建一个新的指令.

原始答案

我完全不依赖于ng-bind指令……在我看来,这似乎更清晰.

<div ng-bind="someModel" my-directive="someModel"></div>

然后将您的指令定义为……

angular.module('myApp').directive('myDirective', function() { 
    return {
        link: function(scope, element, attrs) {
            scope.$watch(attrs.myDirective, function(newValue, oldValue) {
              // Your Code here...
            });           
        }
    };      
});

这样,即使元素上没有ng-bind,也可以使用指令(例如,如果使用花括号).

<div my-directive="someModel">{{someModel}}</div>

或者你可以使用attrs.$observe(…)(documentation)而不是范围.$watch(…).

<div ng-bind="someModel" my-directive="{{someModel}}"></div>

angular.module('myApp').directive('myDirective', function() { 
    return {
        link: function(scope, element, attrs) {
            attrs.$observe('myDirective', function(interpolatedValue) {
              // Your Code here...
            });           
        }
    };      
});

您可以找到有关范围之间差异的更多信息.$watch(…)和attrs.$observe()here.

编辑

鉴于您的指令基本上是在ng-bind指令之后改变DOM,为什么不一起跳过ng-bind呢?

<div my-directive="{{someModel}}"></div>

angular.module('myApp').directive('myDirective', function() { 
    return {
        link: function(scope, element, attrs) {
            attrs.$observe('myDirective', function(interpolatedValue) {
              if (interpolatedValue) {
                // Modify interpolatedValue if necessary...
              }
              element.text(interpolatedValue == undefined ? '' : interpolatedValue);
            });           
        }
    };      
});
相关文章
相关标签/搜索