![](/img/trans.png)
[英]How to make a controller fire a function in a directive (Controller take to directive)
[英]how to fire a controller method from another controller or directive?
我需要的是在另一个控制器上处理某些数据时自动显示一些值,但是当controller2
结束自动处理我的数据后,如何在controller1
上触发$scope.setOnController1
函数。 JS FIDDLE http://jsfiddle.net/b2fCE/228/
这是HTML
代码
<div ng-app="myApp">
<div ng-controller="myController1">
<button ng-click="setOnController1()">Force values(SECOND)</button><br/>
<ul>
<li><b>myController1</b> (values won't change)</li>
<li>{{stringValue}}</li>
<li>{{objectValue}}</li>
</ul>
</div>
<div ng-controller="myController2">
<ul>
<li><b>myController2</b> (values will change when Set Values is clicked or when 2-way binding textbox is modified)</li>
<li>{{stringValue()}}</li>
<li>{{objectValue.data}}</li>
</ul>
<input type="text" ng-model="newValue"></input>
<button ng-click="setString(newValue)">Set Values(FIRST)</button><br/>
<input type="text" ng-model="objectValue.data"></input>2-way binding to objectValue
</div>
</div>
和JS
var app = angular.module('myApp', []);
app.service('sharedProperties', function() {
var stringValue = 'test string value';
var objectValue = {
data: 'test object value'
};
return {
getString: function() {
return stringValue;
},
setString: function(value) {
stringValue = value;
},
getObject: function() {
return objectValue;
}
}
});
app.controller('myController1', function($scope, sharedProperties) {
$scope.setOnController1 = function(sharedPoperties){
$scope.stringValue = sharedProperties.getString();
$scope.objectValue = sharedProperties.getObject().data;
}
});
app.controller('myController2', function($scope, sharedProperties) {
$scope.stringValue = sharedProperties.getString;
$scope.objectValue = sharedProperties.getObject();
$scope.setString = function(newValue) {
$scope.objectValue.data = newValue;
sharedProperties.setString(newValue);
//some code to set values on screen at controller1
};
});
这是JS FIDDLE
有几种不同的方法。 一种,您可以在Controller2上广播一个事件,然后在Controller1上监听该事件(如tymeJV建议的那样)。 您需要在$ rootScope上广播和收听。
app.controller('myController2', function($rootScope, $scope, sharedProperties) {
$scope.stringValue = sharedProperties.getString;
$scope.objectValue = sharedProperties.getObject();
$scope.setString = function(newValue) {
$scope.objectValue.data = newValue;
sharedProperties.setString(newValue);
//some code to set values on screen at controller1
$rootScope.$broadcast("myEvent");
};
app.controller('myController1', function($rootScope, $scope, sharedProperties) {
$scope.setOnController1 = function(sharedPoperties){
$scope.stringValue = sharedProperties.getString();
$scope.objectValue = sharedProperties.getObject().data;
}
$rootScope.$on("myEvent", function() {
$scope.setOnController1(sharedProperties);
});
});
小提琴演示
同样,您可以在Controller1上设置$ watch来监视服务中的值。
app.controller('myController1', function($rootScope, $scope, sharedProperties) {
$scope.setOnController1 = function(sharedPoperties){
$scope.stringValue = sharedProperties.getString();
$scope.objectValue = sharedProperties.getObject().data;
}
$scope.$watch(function(){return sharedProperties.getString()}, function(newValue, oldValue){
$scope.setOnController1(sharedProperties);
});
});
小提琴演示
使用$broadcast
和$on
控制器1:
$scope.$broadcast("myEvent");
控制器2:
$scope.$on("myEvent", function() {
console.log("Lets go!");
});
如果需要在两者之间共享数据,请使用共享服务。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.