我的指令之后NG绑定happend，所以我没有价值 [英] ng-bind happend after my directive so I don't have the value

问题描述

我有NG绑定指令的div元素：

I have a div element with ng-bind directive:

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

我有一个指令，获得一个元件，检查其值/文本，并根据内容增加了颜色的元件。我使用这个指令像：

I have a directive that gets an element, checks its value / text and adds a color to the element according to the content. I am using this directive like that:

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

问题是，在指令执行的时候，没有对DIV没有价值或文本，因为NG绑定还没有发生过。结果
我使用element.text（）获取文本。结果
任何想法如何使我的指令，可里面的文字？

The problem is that on the time the directive is executing, there is no value or text on the div because ng-bind didn't happened yet.
I am getting the text using element.text().
Any idea how to make the text available inside my directive?

推荐答案

编辑2

另一种选择是使用纳克级或 NG-风格改变文本的颜色。然后，你不必在所有创建一个新的指令。

The other option is to use ng-class or ng-style for changing the color of the text. Then you don't have to create a new directive at all.

原来的答案

我不会依赖于 NG-绑定指令在所有...这似乎在我看来，干净多了。

I would not depend on the ng-bind directive at all... This seems much cleaner in my opinion.

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

，然后定义你的指令，因为...

And then define your directive as...

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

这样你就可以用你的指令，即使你没有一个 NG-绑定的元素（例如，如果使用大括号代替）。

This way you can use your directive even if you don't have an ng-bind on the element (for example, if you use curly braces instead).

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

另外，您可以使用 ATTRS。$观察（...）（<一个href=\"http://docs.angularjs.org/api/ng.%24compile.directive.Attributes#methods_%24observe\">documentation)而不是范围。$腕表（...）。

<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...
            });           
        }
    };      
});

您可以找到有关范围。$腕表（...）和 ATTRS之间差异的详细信息。$观察（） <一个href=\"http://stackoverflow.com/questions/14876112/difference-between-observers-and-watchers\">here.

修改

由于您的指令基本上是变异的 NG-绑定指令之后的DOM，为什么不跳过 NG-绑定一起？

Given that your directive is basically mutating the DOM after the ng-bind directive, why not skip the ng-bind all together?

<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);
            });           
        }
    };      
});

这篇关于我的指令之后NG绑定happend，所以我没有价值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！