繁体   English   中英

AngularJS如何从另一个控制器调用一个控制器的功能

[英]Angularjs how to call a function of a controller from another controller

我正在尝试拆分一个大控制器。 可以通过工厂进行操作,但是由于我要更改DOM,因此应该通过控制器来完成。

然后,我要实现的是从Cntrl1调用Cntrl2中定义的函数。 这个例子

HTML

<body ng-app="app">
<div ng-controller='Cntrl1'>
{{message}}
</div>
</body>

JS

var myModule = angular.module('app', []);

angular.module('app').controller('Cntrl1', 
['$scope', '$q', '$timeout', 'Share_scope', 
function ($scope, $q, $timeout, Share_scope) {
    Share_scope.process();
    $scope.message = 'started';
}]);

angular.module('app').controller('Cntrl2', 
['$scope', '$q', '$timeout', 'Share_scope', 
function ($scope, $q, $timeout, Share_scope) {
    Share_scope.x = function() {
           alert('done');
    }
}]);

angular.module('app').factory('Share_scope', 
['$window', '$q',
function($window, $q) {
    var x;
    return {
        process: function() {
            return x;
        },
    };
}]);

演示http://jsfiddle.net/T8rgv/7/

我希望将工厂的“ var x”定义为Cntrl2的函数,然后在我从Cntrl1调用它时通过工厂执行此函数。

那么,如何使这项工作呢? 这种方法正确吗? 还是应该只从工厂更改DOM?

干杯,杰拉德

不知道在Cntrl2与Cntrl1之间的关系,我会像这样使用发射或广播。 请注意,根据过去的经验,我认为在同一页面中使用两个或多个不同的模块不是一个好主意。

var myModule = angular.module('app', []);

angular.module('app').controller('Cntrl1', 
['$scope', '$q', '$timeout', 'myFactory', 
function ($scope, $q, $timeout, myFactory) {
    $scope.$emit('messageEvt','started');
    myFactory.process().then(function() {
        $scope.$emit('messageEvt','ended');
    });
}]);

angular.module('app').controller('Cntrl2', 
['$scope', '$q', '$timeout', $rootScope, 
function ($scope, $q, $timeout, $rootScope) {
    $rootScope.$on('messageEvt',function(e,msg) {
        $scope.message = msg;
    }
}]);

angular.module('app').factory('myFactory', 
['$window', '$q','$timeout',
function($window, $q,$timeout) {
    var x;
    return {
        process: function() {
            var deferObj = $q.defer();
            $timeout(function() {
                deferObj.resolve(x);
            });
            return deferObj.promise;
        },
    };
}]);

我认为更好的方法是让工厂维护模型,并由两个控制器在需要时进行更新。

我将小提琴更新为http://jsfiddle.net/hh5Cy/2/

angular.module('app').factory('Share_scope', 
['$window', '$q',
function($window, $q) {
    var x;

    return {
        getProcess: function() {
            return x;
        },
        setProcess: function(value){
           x = value;
        }
    };
}]);

如果我对你的理解有误,请告诉我。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM