Question

有没有办法解释将我的指令作为属性的div的内容：

示例：

 <div my-directive>{{1+1}}</div>

我的链接功能如下：

  link = (scope, element, attrs) =>
  interpretedString = element.text()

在此示例中，

interpretedString等于{{1+1}}而不是2

任何帮助？ scope.$eval评估属性，但是如果我想评估指令的文本呢？

感谢

Answer 1

为了解释字符串，您需要通过angular $interpolate服务进行插值。

示例：

link = (scope, element, attrs) =>
  interpretedString = $interpolate(element.text())(scope)

Answer 2

只需备份一下，元素的内容可以是任何东西 - 元素树，文本节点，注释的数组，并且（除非你声明你的指令“终端”）它们都会被递归地评估，并且可能有指令内部的指令。我认为将插值字符串作为属性传递会更好。我的意思是你可以这样做，但无论谁使用你的小部件都不会真的期望。

类似的东西：

<div my-directive my-attr="{{1+1}}"></div>

或者甚至（如果该属性是“主要”）：

<div my-directive="{{1+1}}"></div>

从那里开始，$interpolate(element.text())(scope)而不是$interpolate(attrs.myDirective)(scope)，而不是{{1+foo}}

当然，Angular的本质是一切都是动态的，可以随时更新。如果表达式不仅仅具有常量，那么真正的表达式可能不会。如果是：

attrs.$observe('myDirective', function(val) {
    // if say "foo" is 5, val would be 6 here
});

那么问题是你关心它的变化吗？如果没有，$ interpolate很好。它捕获初始值。如果你关心它更新，你应该使用$ observe。

scope.foo = 8

之后如果你像9那样回调运行并通过{{1}}。

Answer 3

替代方法是

<my-directive ng-bind="1+1" />

var two = $scope.$eval('ngBind');

： - P

.directive('myDirective', function () {
    return {
        restrict: 'E',
        scope: {
            ngBind : '='
        },
        link: function (scope, element, attrs) {
            console.log('expecting string "1+1": '+attrs.ngBind);
            console.log('expecting evaluated string "2": '+scope.$eval('ngBind'));
        }
    };
});

旁注：<div ng-bind="val"></div>与<div>{{val}}</div>几乎相同。除了你保存4个括号，并且当事情可能变得更慢时，永远不会看到它们闪烁。

Angular解释{{}}在自定义指令的链接函数内

3 个答案: