Question

当元素的属性包含多个角度表达式时，这些表达式将计算为空字符串。在我的例子中，我有一个带有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。故意将它的值设置为两个相同的表达式。但是在指令的链接功能中，该属性的值是一个空字符串。

Answer 1

您的代码存在两个问题。

首先，正如我在Angular directive fields not require brackets中所说的那样。指令字段中的双花括号会导致问题。您应该使用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表达式，并且不能使用双花括号。

双花括号有时在指令中起作用，有时是必要的。这取决于指令的实施方式。所以最终的答案取决于它。

为什么角度表达式会评估属性中的空字符串

1 个答案: