Question

我是Angular JS的新手，我正在通过教程

学习它

我的问题是为什么我的模型没有更新视图？

以下是代码。

<!DOCTYPE html>

<div ng-controller="MyContr">
    {{xxx}}
</div>


<input type="text"  ng-model="xxx" ng-controller="MyContr" />
    <script>
    var app = angular
              .module("MyApp", [])
              .controller("MyContr", function ($scope) {
                  var xxx="Alexander"
                  $scope.xxx = xxx;
                 });
</script>

Answer 1

根据问题上显示的代码，您似乎正在调用MyContr两次，

一个人在这里：

<div ng-controller="MyContr">
    {{xxx}} <!-- xxx (instance 1) -->
</div>

另一个在这里：

<!-- xxx (instance 2) --> 
<input type="text"  ng-model="xxx" ng-controller="MyContr" />

...因此正在创建同一控制器的两个（不同的）实例。这样每个实例都有两个不同的xxx var，每个实例的范围都有自己的xxx变量。

<强>解决方案

选项1 - 您可以在实例之间共享数据（请参阅Share data between AngularJS controllers和AngularJS: How can I pass variables between controllers?）

选项2 - 将这两个html元素包含在MyContr的同一个实例中，如下所示：

<span ng-controller="MyContr">
    <div>
        {{xxx}}
    </div>
    <input type="text"  ng-model="xxx" />
</span>

为什么模型不更新视图？

1 个答案: