Question

我需要的是在我处理另一个控制器上的某些数据时自动显示一些值，但是当$scope.setOnController1结束处理时，如何在controller1上触发controller2功能我的数据自动。 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

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

Answer 1

有几种不同的方式。一，您可以在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);
    });
});

Fiddle演示

同样，您可以在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);
    });

});

Fiddle演示

Answer 2

使用$broadcast和$on

控制器1：

$scope.$broadcast("myEvent");

控制器2：

$scope.$on("myEvent", function() {
    console.log("Lets go!");
});

如果您需要在两者之间共享数据，请使用共享服务。

如何从另一个控制器或指令触发控制器方法？

2 个答案: