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

String containing other String not updating automatically

本文关键字：字符串 更新 其他 包含      更新时间：2023-09-26

为什么myCtrl。当我更新myCtrl.name?

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循环，然后更新mCtrl。视图中的问候?

这不是因为angular，而是因为JavaScript。当你分配你的greeting -string, 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>

相关文章：