使用大括号在属性中指定角度表达式

Question

我知道在 Angular 中，不建议在属性中使用带有表达式的双大括号，但是为什么如果仍然使用它们，这些表达式在某些情况下会评估而不是在其他情况下。 这是带有给定示例的plunker 。 此处的警报框显示一个空字符串，但如果您将 $scope.mytest 分配移到服务的“then”函数之外（如下所示），则它可以正常工作。 这是一个错误还是预期的行为？

app.controller('MainCtrl', function($scope, jsonService) {
  $scope.mytest = 'Bzzz';
  jsonService.getjson().then(function(d) {
    $scope.sourceData = d;
    $scope.loaded = true;
  });

});

编辑：

当一个属性包含多个表达式时，可以观察到上述条件，这些表达式应该计算为作用域变量。 但是如果你只在属性中留下一个表达式，一切正常：

<my-directive myattr="{{mytest}}">{{mytest}}{{mytest}}</my-directive>

即使在“then”的函数中设置了范围变量：

app.controller('MainCtrl', function($scope, jsonService) {
  jsonService.getjson().then(function(d) {
    $scope.mytest = 'Bzzz';
    $scope.sourceData = d;
    $scope.loaded = true;
  });

});

Answer 1

问题是不会重新评估双重表达式。 因此，在您的第一个示例中，当值直接分配给 $scope 属性时（即“在初始化时”），您的代码将起作用。

但是，一旦您将分配移至 promise 处理程序，属性表达式将不再收到有关更改的通知。

如果您想让您的示例工作，请将两个表达式合并为一个，例如：

<my-directive myattr="{{mytest + mytest}}">{{mytest}}{{mytest}}</my-directive>

Answer 2

这与在属性中使用 {{}} 无关。 Html 是视图，js 是模型。 您应该从视图访问模型，而不应该从模型访问视图。

Html 使用 $watchers 更新，未定义 $watchers 的顺序 - 您的代码不应取决于首先运行哪个观察者，因此您不应在另一个观察者中解决一个观察者的结果。

Answer 3

有类似的情况，只需完成：

<my-directive :myattr="mytest">{{mytest}}</my-directive>

如果在 HTML 元素之外（例如在属性中），请使用带双花括号的版本。

另一个例子，用字符串 + 表达式：

<a :href="'mailto:' + contactEmailAddress">{{contactEmailAddress}}</a>