使用大括號在屬性中指定角度表達式

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>