如何火从另一个控制器或指令的控制器的方法? [英] how to fire a controller method from another controller or directive?
问题描述
我需要的是自动显示某些值,当我处理另一个控制器上的一些数据,但我怎么能火上<$ C $我的 $ scope.setOnController1
功能C>控制器1 在控制器2
已经结束自动处理我的数据。 JS FIDDLE http://jsfiddle.net/b2fCE/228/
What I need is to show some values automatically when I process some data on another controller, but how can I fire my $scope.setOnController1
function on controller1
when the controller2
have ended to process my data automatically. JS FIDDLE http://jsfiddle.net/b2fCE/228/
下面是 HTML
的code
<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
Here is the JS FIDDLE
http://jsfiddle.net/b2fCE/228/
推荐答案
有几种不同的方法。一,你可以播出控制器2一个事件,并侦听控制器1事件(如tymeJV建议)。您需要广播,听上的$ rootScope。
There are a couple different ways. One, you can broadcast an event on Controller2 and listen for the event on Controller1 (like tymeJV suggests). You need to broadcast and listen on the $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);
});
});
小提琴演示
同样,你可以设置在控制器1一$手表在服务观赏价值。
Similarly, you can setup a $watch on Controller1 to watch the value in your service.
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);
});
});
小提琴演示
这篇关于如何火从另一个控制器或指令的控制器的方法?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!