为什么 angular 表达式的计算结果为属性中的空字符串

Question

当一个元素的属性包含多个 angular 表达式时，这些表达式的计算结果为空字符串。在我的示例中，我有一个具有 2 个相同表达式的属性，它们都只是输出范围变量。如果我删除一个表达式，则另一个表达式会正确计算。我错过了什么？

从控制器中提取：

$http.get(
    "http://myurl/odata/Profile",
    {
        params: {
            "$orderby": "Id",
            "someParamId": "10"
        }
    }
).success(function (response) {
        $scope.data = response.value;
        $scope.mytest = "hello";
        $scope.dataRead = true;
    }
);

指令摘录：

    link: function (scope, elem, attrs) {
        scope.$watch("dataRead", function (dataAvailable) {
            if (dataAvailable) {
                ...here I check for mytest attribute value...

摘自我的html：

     <my-directive id="someId" style="position: absolute; background-color:bisque;" width="200" mytest="{{mytest}}{{mytest}}"....

在上面的示例中，如果 mytest 有两次该表达式，则结果值为空字符串，否则计算正确。所以基本上一旦在同一属性值中有超过 1 个范围变量表达式，它就无法评估。

迫切需要帮助！

已编辑：

抱歉编辑晚了。这是显示问题的 plunker。 index.html 页面中有一个属性 myattr。它故意将其值设置为两个相同的表达式。然而，在指令的 link 函数中，此属性的值为空字符串。

Answer 1

你的代码有两个问题。

首先，正如我在中所说的。指令字段中的双花括号会导致问题。您应该改用 Angular 表达式。

有问题HTML

<body ng-controller="myViewCtrl">
                      <!-- this is a problem -->
    <my-directive myattr="{{mytest}}{{mytest}}"></my-directive>
    <span>{{mytest}}{{mytest}}</span>
</body>

改为使用：

<body ng-controller="myViewCtrl">
    <my-directive myattr="mytest+mytest"></my-directive>
    <span>{{mytest}}{{mytest}}</span>
</body>

第二题

要查看属性的计算值，您需要使用范围的 $eval 方法。

app.directive('myDirective', function() {
  return {
    restrict: 'E',
    link: function(scope, elem, attrs) {
      scope.$watch("loaded", function(loaded) {
        if (loaded) {
          //Do this
          alert(scope.$eval(attrs.myattr));
          //Not this
          //alert(attrs.myattr);
        }
      });
    }
  }
});

要了解有关 $eval 方法的更多信息，请参阅 AngularJS $rootScope.Scope API Reference。

读者须知

指令 ng-src、ng-srcset 和 ng-href 是内插的，并与双大括号一起使用。大多数其他属性指令使用 $eval 来评估 Angular 表达式并且不能使用双大括号。

双花括号有时在指令中起作用，有时是必需的。这取决于指令是如何实现的。所以最终的答案是视情况而定。

为什么 angular 表达式的计算结果为属性中的空字符串

Why angular expressions evaluate to empty strings in an attribute

expression

scope

angularjs