为什么我更新 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 属性时它会运行一个 $digest 循环,然后在 View 中更新 mCtrl.greeting?
最佳答案
这不是因为 angular,而是因为 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>
关于javascript - 包含其他字符串的字符串不会自动更新,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33236692/