包含其他字符串的字符串不會自動更新

Question

爲什麼當我更新myCtrl.name時，myCtrl.greeting不會自動更新？

angular.module('MyApp', []) 
 
    .controller('MainController', [function(){ 
 
     var mCtrl = this; 
 
     mCtrl.name = ''; 
 
     mCtrl.greeting = 'Greetings ' + mCtrl.name; 
 
    }]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="MyApp" ng-controller="MainController as mCtrl"> 
 
    <input type="text" ng-model="mCtrl.name"> 
 
    <h3 ng-bind="mCtrl.greeting"></h3> 
 
</div> 
 

我認爲，當我更新，它會運行一個$消化循環的mCtrl.name屬性，它會接着在視圖更新mCtrl.greeting？

Answer 1

這不是因爲角度，而是因爲JavaScript。當您分配greeting字符串時，將複製name的值，而不是引用該值。所以即使name發生變化，greeting仍然保持不變。例如短爲清楚起見：

var a = 'Foo'; 
var b = a + 'bar'; //b = 'Foobar', there is no reference to a 
b == 'Foobar'; //This is true 

a = 'Lalelu'; 
b != 'Lalelubar'; //b is still 'Foobar' 

而是建立在你的模板表達式來獲得所需的行爲：

<h3>Greetings {{mCtrl.name}}</h3> 

工作正常。試試下面。

angular.module('MyApp', []) 
 
    .controller('MainController', [function(){ 
 
     var mCtrl = this; 
 
     mCtrl.name = ''; 
 
     mCtrl.greeting = 'Greetings ' + mCtrl.name; 
 
    }]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="MyApp" ng-controller="MainController as mCtrl"> 
 
    <input type="text" ng-model="mCtrl.name"> 
 
    <h3>Greetings {{mCtrl.name}}</h3> 
 
</div>