2014-02-18 137 views
0

我想分割一个大的控制器。走的路将通过工厂,但由于我正在改变DOM,我应该通过控制器来完成。Angularjs如何从另一个控制器调用控制器的功能

然后,我想要实现的是从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/

什么我希望是定义工厂 “变种X” 作为CNTRL2的功能,然后在我从Cntrl1调用它的时候通过工厂执行这个函数。

那么,如何使这项工作?这种方法是否正确?或者我应该只是从工厂更改DOM?

干杯, 杰拉德

+0

我认为你错误的工厂“share_scope”。工厂不是范围。但是你是正确的,与控制器通信的一种好方法是通过工厂。 – koolunix

回答

1

不知道其中的关系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; 
     }, 
    }; 
}]); 
+0

我已经意识到可以在工厂生成html代码,只是代码应该插入到控制器中的DOM中,而不是在工厂中。如果这是正确的,那么我将使用单个控制器来操纵DOM和工厂来构建应该在之后添加的hmtl(然后问题是无关紧要的) – Gerard

0

我认为更好的方式来做到这一点是通过使工厂保持模型和两个控制器在需要时进行更新。

我的小提琴更新为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; 
     } 
    }; 
}]); 

请让我知道如果我明白你错。

相关问题