Javascript 为一个控制器拆分HTML组件会导致控制器停止工作

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

我用一个简单的例子来说明这一点。查看示例是最容易的，但我也在下面发布代码

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>

submit按钮工作正常，但是当我单击Reset按钮时，我看到控制台中记录了

Reseting

，但是我的视图（表单输入）没有更新

---

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

我不知道angularjs是如何工作的，但如果您将第二个输入

放在“重置”按钮附近，此输入将被更新。 输入是否应在同一div控制器内？

---

它能帮助您解决问题吗？

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

您可能已经听说过Angular中的服务，而这正是您需要使用它们来解决问题的地方<您使用的code>search是两个控制器实例共享的公共对象（请注意，该类与

MyCtrl

相同，但通过输入两个

ng controller=“MyCtrl”

您要求Angular创建两个

MyCtrl

实例）。因此，这两个对象可以访问两个不同的范围，当它们被创建时，两个不同的范围被设置为两个不同的搜索对象。当您单击reset时，会调用另一个

search

对象

reset

，这意味着在第一个

MyCtrl

的范围内不会发生任何事情。这就是为什么您的代码不能按预期工作的原因

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

下面是一个与您的代码一起工作的plunk

---

查看您的示例，似乎您缺少重置按钮的表单标签。从角度来看，如果您可以为controller=“MyCtrl”使用一个外部div，其中有一个带有两个按钮的表单-submit（）和reset（），并且在外部div中放置嵌套的controller“SomeOtherCtrl”，那么它应该能很好地工作。

在

MyCtrl

的末尾添加

console.log（$scope）

，将看到您正在创建两个具有不同作用域ID的独立对象实例。可能需要一个服务来处理作用域？中间控制器不能嵌套在

mYCtrl

？我可以使用服务解决这个问题。我希望我不必这么做，但这似乎是我唯一的选择。不幸的是，中间的控制器不能嵌套在MyCtrl中，因为MyCtrl的第一个实例本身嵌套在另一个控制器中。将输入移动到同一个div确实解决了这个问题，但我不能这样做，因为它更改了页面的布局。感谢您如此好地解释这一点。正如您所做的那样，我最终使用了一个服务来桥接这两个实例。

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';
}