1

如果我创建两个 div，都由同一个控制器控制，Angular 的控制器似乎停止更新我的视图。

我已经整理了一个简单的例子来证明这一点。在 JSFiddle 上查看示例是最简单的，但我也在下面发布代码。

HTML

<div ng-app='App'>
    <div ng-controller="MyCtrl">
        <form>
            <input type="text" ng-model="search.query"></input>
            <button ng-click="search.submit()">Submit</button>
        </form>
    </div>
    <div ng-controller="SomeOtherCtrl">
        {{sampleText}}
    </div>
    <div ng-controller="MyCtrl">
        <button ng-click="search.reset()">Reset Form</button>
    </div>
</div>

JS

var app = angular.module('App',[]);

function MyCtrl($scope)
{
    $scope.search = {
        query : 'foobar',
        submit : function() {
            this.query = 'Submitted';
            console.log(this.query);
        },
        reset : function() {
            console.log('resetting');
            this.query = '';
        }
    };
}

function SomeOtherCtrl($scope) {
    $scope.sampleText = 'other controller text';
}

提交按钮工作正常，但是当我单击重置按钮时，我看到resetting登录控制台，但我的视图（表单输入）没有更新。

为什么会这样？在我正在进行的当前项目中，我被迫这样做，因为介于两者之间的某些 HTML 属于另一个控制器。我该如何解决这个问题？

4

3 回答 3

2

角度中的控制器定义实际上是一个类/构造函数，而不是一个对象。在 HTML 中引用控制器的每个位置，在编译阶段，angular 都会使用定义的控制器类创建一个新的控制器对象。因此，您可以使用相同的控制器类引用多个范围。

您可能已经听说过 Angular 中的服务，而这正是您需要使用它们来解决它的地方。search您正在使用的是一个由两个控制器实例共享的公共对象（请注意，该类是相同的MyCtrl，但通过放入两个ng-controller="MyCtrl"您要求 Angular 创建两个实例MyCtrl）。所以这两个对象可以访问两个不同的范围，当它们被创建时，这两个不同的范围被设置为两个不同的搜索对象。当您单击重置时，会调用其他search对象reset，这意味着在 firstMyCtrl的范围内没有任何反应。这就是您的代码无法按预期工作的原因。

现在请注意，角度服务是单例的。因此，如果您在多个地方引用它们，您就可以访问同一个对象。因此，在不同的控制器（实例）中重置仍然会重置同一个对象。

这是一个适用于您的代码的 plunk。

http://plnkr.co/edit/zynAdS9hg8DUZDnlnYFm?p=preview

于 2013-03-25T10:03:33.840 回答
0

我不知道 angularjs 是如何工作的，但如果你将第二个输入放在<input type="text" ng-model="search.query"></input>重置按钮附近，这个输入将被更新。输入应该在同一个 div 控制器内吗？它会帮助你解决你的问题吗？

于 2013-03-25T04:50:07.757 回答
0

查看您的示例，您似乎缺少重置按钮的表单标记。从角度来看，如果您可以将一个外部 div 用于控制器 =“MyCtrl”，其中您有一个带有两个按钮的表单 -submit() 和 reset()，并且在外部 div 内放置您的嵌套控制器“SomeOtherCtrl”，那么它应该可以完美地工作.

于 2017-05-29T13:13:27.993 回答