Question

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

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>

即使在＆＃39;然后＆＃39;的功能中设置了范围变量：

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

});

Answer 1

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

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

Answer 2

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

但是，一旦将分配移动到promise处理程序，属性表达式将不再被通知更改。

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

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

Answer 3

遇到类似情况，只需完成以下操作：

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

如果超出HTML元素（例如in属性），请使用带有大括号的版本。

另一个示例，带有字符串+表达式：

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

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

3 个答案: