我有两个控制器,一个控制器过滤器和一个显示控制器导致第一个我有一组单选按钮,当你更改单选按钮时,发送一个事件来改变第二个控制器中显示的值,代码是如下 : 我知道在第二个控制器中没有立即更改cament
HTML:
<div ng-controller="MyCtrl1">
<input type="radio" ng-model="value" value="evol1" ng-change="setSelectedEvol(value)" name="evol">
<br>
<input type="radio" ng-model="value" value="evol2" ng-change="setSelectedEvol(value)" name="evol">
</div>
<div ng-controller="MyCtrl2">
on change button radio evol = {{displayEvol}}
</div>
角:
var myApp = angular.module('myApp',[]);
function MyCtrl1 ($scope) {
$scope.setSelectedEvol = function (value) {
$scope.selectedEvol = value;
switch ($scope.selectedEvol) {
case 'evol1':
$scope.evol = 'Evol. VA';
break;
case 'evol2':
$scope.evol = 'Evol. %';
break;
}
$rootScope.$broadcast('ctr1Data', $scope.evol);
}
function MyCtrl2 ($scope) {
$scope.$on('ctr1Data', function (event, args) {
$scope.displayEvol= args;
});
}
答案 0 :(得分:3)
看到这个小提琴
http://jsfiddle.net/jigardafda/skyk3erh/
使用活动
HTML
<div ng-app="myapp">
<div ng-controller="MyCtrl1">
<input type="radio" ng-model="value" value="evol1" ng-change="setSelectedEvol(value)" name="evol"/>
<br/>
<input type="radio" ng-model="value" value="evol2" ng-change="setSelectedEvol(value)" name="evol"/>
</div>
<div ng-controller="MyCtrl2">
on change button radio evol = {{displayEvol}}
</div>
</div>
JS
var myApp = angular.module('myapp',[]);
myApp
.controller('MyCtrl1', function ($scope, $rootScope) {
$scope.setSelectedEvol = function (value) {
$scope.selectedEvol = value;
switch ($scope.selectedEvol) {
case 'evol1':
$scope.evol = 'Evol. VA';
break;
case 'evol2':
$scope.evol = 'Evol. %';
break;
}
$rootScope.$broadcast('ctr1Data', $scope.evol);
};
})
.controller('MyCtrl2', function ($scope, $rootScope) {
$scope.displayEvol = '';
$scope.$on('ctr1Data', function (event, args) {
$scope.displayEvol= args;
});
});
使用$ parent
如果两个控制器并排,这将起作用。
http://jsfiddle.net/jigardafda/skyk3erh/2/
HTML
<div ng-app="myapp">
<div ng-controller="MyCtrl1">
<input type="radio" ng-model="value" value="evol1" ng-change="setSelectedEvol(value)" name="evol"/>
<br/>
<input type="radio" ng-model="value" value="evol2" ng-change="setSelectedEvol(value)" name="evol"/>
</div>
<div ng-controller="MyCtrl2">
on change button radio evol = {{displayEvol}}
<br/>
{{balue}}
<br/>
{{$parent.balue}}
</div>
</div>
JS
var myApp = angular.module('myapp',[]);
myApp
.controller('MyCtrl1', function ($scope, $rootScope) {
$scope.setSelectedEvol = function (value) {
$scope.selectedEvol = value;
switch ($scope.selectedEvol) {
case 'evol1':
$scope.evol = 'Evol. VA';
break;
case 'evol2':
$scope.evol = 'Evol. %';
break;
}
$rootScope.$broadcast('ctr1Data', $scope.evol);
$scope.$parent.balue = $scope.evol;
};
})
.controller('MyCtrl2', function ($scope, $rootScope) {
$scope.displayEvol = '';
$scope.$on('ctr1Data', function (event, args) {
$scope.displayEvol= args;
});
});