Angularjs 当我对两个div使用同一个控制器时，不会反映模型_Angularjs

Angularjs 当我对两个div使用同一个控制器时，不会反映模型

angularjs

Angularjs 当我对两个div使用同一个控制器时，不会反映模型,angularjs,Angularjs,我在两个分区中提供了相同的控制器，但在一个分区中更新的模型并不能反映在另一个分区中 <body ng-app="myApp"> <div ng-controller="filterCtrl"> <p ng-bind="test" /> </div> <div ng-controller="filterCtrl"> <p><input type="text" ng-

我在两个分区中提供了相同的控制器，但在一个分区中更新的模型并不能反映在另一个分区中

<body ng-app="myApp">
    <div ng-controller="filterCtrl">
        <p ng-bind="test" />
    </div>
    <div ng-controller="filterCtrl">
        <p><input type="text" ng-model="test" ng-change="handleChange()"></p>
    </div>
</body>

当我进入文本框时，它并没有更新上面div的“ng--bind”。不过，如果我把“ng绑定”放在div having文本框中，它就可以正常工作了。请在这方面帮助我。

应该是这样的

<html ng-app="myApp">
    <body ng-controller="filterCtrl">
        <div>
            <p>{{test.text}}</p>
        </div>
        <div>
            <p><input type="text" ng-model="test.text" ng-change="handleChange()"></p>
        </div>
    </body>
</html>


{{test.text}

这里的例子应该是这样的

<html ng-app="myApp">
    <body ng-controller="filterCtrl">
        <div>
            <p>{{test.text}}</p>
        </div>
        <div>
            <p><input type="text" ng-model="test.text" ng-change="handleChange()"></p>
        </div>
    </body>
</html>


{{test.text}

下面是代码中重用控制器的一个好例子：

正如您所看到的，它们都可以工作，但相互独立。
这是因为彼此实例化了自己的范围。如果你想让他们交谈，你可以通过一些服务，或者为他们创建一些共同的作用域，或者将他们合并到一个控制器实例中

您可以将父范围用作两者的公共部分

  <div ng-controller="MainCtrlr as c">
      <input ng-model="$parent.name" />
       Hello, {{$parent.name}}!!!
  </div>  
  <div ng-controller="MainCtrlr as c">
      <input ng-model="$parent.name" />
       Hello, {{$parent.name}}!!!
  </div>

模板：

  <div ng-controller="MainCtrlr as c">
      <input ng-model="c.MD.name" />
       Hello, {{c.MD.name}}!!!
  </div>  
  <div ng-controller="MainCtrlr as c">
      <input ng-model="c.MD.name" />
       Hello, {{c.MD.name}}!!!
  </div>


你好，{{c.MD.name}}！！！
你好，{{c.MD.name}}！！！

在代码中重用控制器没什么不好的：

您可以将父范围用作两者的公共部分

  <div ng-controller="MainCtrlr as c">
      <input ng-model="$parent.name" />
       Hello, {{$parent.name}}!!!
  </div>  
  <div ng-controller="MainCtrlr as c">
      <input ng-model="$parent.name" />
       Hello, {{$parent.name}}!!!
  </div>

模板：

  <div ng-controller="MainCtrlr as c">
      <input ng-model="c.MD.name" />
       Hello, {{c.MD.name}}!!!
  </div>  
  <div ng-controller="MainCtrlr as c">
      <input ng-model="c.MD.name" />
       Hello, {{c.MD.name}}!!!
  </div>


你好，{{c.MD.name}}！！！
你好，{{c.MD.name}}！！！

问题：如果我们尝试将同一控制器与两个div关联，那么angular将为这两个div创建两个不同的作用域。如果我们试图在一个实例中更新范围，那么它将不会反映到另一个实例中

有两种方法可以摆脱这种情况：

您可以创建一个将filterCtrl作为其子控制器的mainCntrl。并假定mainCntrl具有mainView作用域属性。我们在mainCntrl上创建了一个mainView对象，由于filterCtrl及其作用域原型继承自mainCntrl，因此我们可以在filterCtrl的任何实例中始终访问mainView


angular.module（'myApp'，[]）
.controller（'mainCntrl'，函数（$scope）{
$scope.mainView={}；
$scope.mainView.x='Something'；
})
.controller（'filterCtrl'，函数（$scope）{
});

有两种方法可以摆脱这种情况：


angular.module（'myApp'，[]）
.controller（'mainCntrl'，函数（$scope）{
$scope.mainView={}；
$scope.mainView.x='Something'；
})
.controller（'filterCtrl'，函数（$scope）{
});

为什么定义控制器twice因为当您在不同的div中创建同一控制器两次时，它将创建同一控制器的两个不同实例，ng模型属于您要声明的同一控制器，这就是为什么它不反映在其他控制器中。为什么定义控制器twice因为在不同的div中创建同一个控制器两次它将创建同一控制器的两个不同实例，ng模型属于您要声明的同一控制器，这就是为什么它不反映在其他控制器中。