javascript - 为什么模型不更新 View ?

标签 javascript angularjs angularjs-directive angularjs-scope

我是 Angular JS 的新手,我正在通过教程学习它,

我的问题是为什么我的模型没有更新 View ?

以下是代码。

<!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>

最佳答案

根据问题中显示的代码,您似乎调用了 MyContr 两次,

这里有一个:

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

还有另一个:

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

...因此正在创建同一 Controller 的两个(不同)实例。这样,每个实例都有两个不同的 xxx 变量,每个变量在其作用域上都有自己的 xxx 变量。

解决方案

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

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

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

关于javascript - 为什么模型不更新 View ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43332633/

相关文章:

javascript - 从选择下拉列表中隐藏/显示标签和段落

angularjs - Angular - 使用表单输入指令时的表单验证问题

angularjs - Angular 模态对话框最佳实践

javascript - 使用 .get 和 youtube api 检查视频是否存在

javascript - 如何用localStorage制作 “Mark as Read”?

javascript - 获取所有 Angular Controller

angularjs - Angular 过滤器定义中的 'anyPropertyKey' 是什么?

javascript - 提交按钮不工作 AngularJS

javascript - 自定义指令限制用户输入特殊字符 : angular Js

javascript - Electron :打印 iframe 给出引用