Question

我在两个div中给出了相同的控制器，但是在一个div中更新的模型在另一个div中没有反映出来。

<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-bind”放在带有文本框的div中，它的工作正常。请帮助我。

Answer 1

应该是那样的

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

此处plunker

上的示例

Answer 2

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

正如你所看到的，它们都是有效的，但却是独立的这是因为彼此实例化自己的范围。如果你想让他们说话，你可以通过一些服务来创建它们，或者为它们创建一些共同的范围，或者将它们合并到一个控制器实例中。

您可以将父作用域用作两者的通用部分。

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

Fiddle

通过服务谈话会比这更好：

代码：

angular.module('app', [])
.controller('MainCtrlr', ['MainData', function(MD){
  this.MD = MD;
  MD.name = 'World';
}]).service('MainData', [function(){}])

模板：

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

Fiddle

Answer 3

问题：

如果我们尝试将同一个控制器与两个div关联起来，那么angular会为这两个div创建两个不同的范围。如果我们尝试在一个实例中更新范围，那么它将不会反映到其他实例。

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

您可以创建一个具有filterCtrl作为其子控制器的mainCntrl。并假设mainCntrl具有mainView范围属性。我们在mainCntrl上创建了一个mainView对象，并且由于filterCtrl及其范围原型继承自mainCntrl，因此我们总是可以在filterCtrl的任何实例中访问该mainView。

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
 <html>
    	<head>
    		
    		<script>
    			angular.module('myApp', [])
    			.controller('mainCntrl', function($scope) {
    				$scope.mainView = {};
    				$scope.mainView.x = 'Something';
    			})
    			.controller('filterCtrl', function($scope) {
    			});
    		</script>
    	</head>
    	<body ng-app="myApp">
    		<div ng-controller="mainCntrl">
    			<div ng-controller="filterCtrl">
    				<p ng-bind="mainView.x" />
    			</div>
    			<div ng-controller="filterCtrl">
    				<p><input type="text" ng-model="mainView.x" ng-change="handleChange()"></p>
    			</div>
    		</div>
    	</body>
    </html>

我们可以使用$ parent，可以通过$ scope。$ parent访问。这个地方将是filterCtrl的所有实例的常见位置。所以，无论我们放在$ scope。$ parent，都将适用于所有实例。

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
       <html>
    	<head>
    		<script>
    			angular.module('myApp', [])
    			.controller('filterCtrl', function($scope) {
    				$scope.$parent.test = 'Something';
    			});
    		</script>
    	</head>
    	<body ng-app="myApp">
    			<div ng-controller="filterCtrl">
    				<p ng-bind="$parent.test" />
    			</div>
    			<div ng-controller="filterCtrl">
    				<p><input type="text" ng-model="$parent.test" ng-change="handleChange()"></p>
    			</div>
    	</body>
    </html>

当我使用具有两个div

3 个答案:

问题：