如何从另一个控制器或指令触发控制器方法? [英] how to fire a controller method from another controller or directive?

问题描述

我需要的是在另一个控制器上处理一些数据时自动显示一些值，但是当我在 controller1 上触发我的 $scope.setOnController1 函数时controller2 已结束自动处理我的数据.JS 小提琴 http://jsfiddle.net/b2fCE/228/

这是HTML代码

<div ng-controller="myController1"><button ng-click="setOnController1()">力值(SECOND)</button><br/><ul><li><b>myController1</b>(值不会改变)</li><li>{{stringValue}}</li><li>{{objectValue}}</li>
<div ng-controller="myController2"><ul><li><b>myController2</b>(单击设置值"或修改 2 向绑定文本框时，值将更改)</li>
{{stringValue()}}
{{objectValue.data}}
<input type="text" ng-model="newValue"></input><button ng-click="setString(newValue)">设置值(FIRST)</button><br/><input type="text" ng-model="objectValue.data"></input>2-way绑定到objectValue

和JS

var app = angular.module('myApp', []);app.service('sharedProperties', function() {var stringValue = '测试字符串值';var objectValue = {数据:'测试对象值'};返回 {获取字符串:函数(){返回字符串值；},设置字符串:函数(值){字符串值 = 值；},获取对象:函数(){返回对象值；}}});app.controller('myController1', function($scope, sharedProperties) {$scope.setOnController1 = 函数(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 = 函数(新值){$scope.objectValue.data = newValue;sharedProperties.setString(newValue);//一些代码在控制器1的屏幕上设置值};});

这是 JS FIDDLE

http://jsfiddle.net/b2fCE/228/

解决方案

有几种不同的方法.一，您可以在 Controller2 上广播一个事件并在 Controller1 上监听该事件(就像 tymeJV 建议的那样).您需要在 $rootScope 上广播和收听.

app.controller('myController2', function($rootScope, $scope, sharedProperties) {$scope.stringValue = sharedProperties.getString;$scope.objectValue = sharedProperties.getObject();$scope.setString = 函数(新值){$scope.objectValue.data = newValue;sharedProperties.setString(newValue);//一些代码在控制器1的屏幕上设置值$rootScope.$broadcast("myEvent");};app.controller('myController1', function($rootScope, $scope, sharedProperties) {$scope.setOnController1 = 函数(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 = 函数(sharedPoperties){$scope.stringValue = sharedProperties.getString();$scope.objectValue = sharedProperties.getObject().data;}$scope.$watch(function(){return sharedProperties.getString()}, function(newValue, oldValue){$scope.setOnController1(sharedProperties);});});

小提琴演示

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/

Here is HTML the 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>

And 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
    };

});

Here is the JS FIDDLE

http://jsfiddle.net/b2fCE/228/

解决方案

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);
    });
});

Fiddle demo

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);
    });

});

Fiddle demo

这篇关于如何从另一个控制器或指令触发控制器方法?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！