Atu*_*rma 3 angularjs angularjs-directive angularjs-scope
我有两个div与相同的控制器,两个div几乎相同的数据显示.两个div都有一个更新对象的按钮.但是当一个div的按钮更新对象时它不会反映在第二个div上.
<body ng-app="myapp">
<div ng-controller="ctrl1">
{{list.greet}}
<button ng-click="add('hi')">add</button>
</div>
<div ng-controller="ctrl1">
{{list.greet}}
<button ng-click="add1('hello')">add</button>
</div>
</body>
脚本
var app=angular.module('myapp',[])
.controller('ctrl1',function($scope){
$scope.list={
greet:'hola'
}
$scope.add=function(data){
$scope.list.greet=data
}
$scope.add1=function(data){
$scope.list.greet=data
}
})
这两个div都有一个ng-controller属性.这意味着每个div都有自己的控制器实例.尝试将ng-controller添加到公共父元素
<body ng-app="myapp" ng-controller="ctrl1">
<div>
{{list.greet}}
<button ng-click="add('hi')">add</button>
</div>
<div>
{{list.greet}}
<button ng-click="add1('hello')">add</button>
</div>
</body>
您可以使用服务在控制器和同一控制器的不同实例之间共享数据:
var app = angular.module('myapp', [])
.controller('ctrl1', function($scope, myService) {
$scope.a = myService.list;
$scope.add = function(data) {
$scope.a.greet.push(data);
}
})
.service('myService', function() {
this.list = {greet: []};
});<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<body ng-app="myapp">
<div ng-controller="ctrl1">
Ctrl1: <br>
{{a.greet}}
<button ng-click="add('c1a')">add</button>
</div>
<div ng-controller="ctrl1">
Ctrl1: <br>
{{a.greet}}
<button ng-click="add('c1b')">add</button>
</div>
</body>| 归档时间： |
|
| 查看次数： |
3468 次 |
| 最近记录： |