包含其他字符串的字符串不会自动更新

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>