一个AngularJS控制器可以调用另一个控制器吗?

是否可以让一个控制器使用另一个控制器?

例如:

这个HTML文档只是打印MessageCtrl控制器在MessageCtrl .js文件中传递的消息。

<html xmlns:ng="http://angularjs.org/">
<head>
    <meta charset="utf-8" />
    <title>Inter Controller Communication</title>
</head>
<body>
    <div ng:controller="MessageCtrl">
        <p>{{message}}</p>
    </div>

    <!-- Angular Scripts -->
    <script src="http://code.angularjs.org/angular-0.9.19.js" ng:autobind></script>
    <script src="js/messageCtrl.js" type="text/javascript"></script>
</body>
</html>

控制器文件包含以下代码:

function MessageCtrl()
{
    this.message = function() { 
        return "The current date is: " + new Date().toString(); 
    };
}

它只是打印当前日期;

如果我要添加另一个控制器DateCtrl，它将日期以特定格式返回给MessageCtrl，将如何进行此操作?DI框架似乎与xmlhttprequest和访问服务有关。

当前回答

控制器之间有多种通信方式。

最好的可能是共享服务:

function FirstController(someDataService) 
{
  // use the data service, bind to template...
  // or call methods on someDataService to send a request to server
}

function SecondController(someDataService) 
{
  // has a reference to the same instance of the service
  // so if the service updates state for example, this controller knows about it
}

另一种方法是在作用域上释放事件:

function FirstController($scope) 
{
  $scope.$on('someEvent', function(event, args) {});
  // another controller or even directive
}

function SecondController($scope) 
{
  $scope.$emit('someEvent', args);
}

在这两种情况下，您也可以与任何指令通信。

2012-02-23 05:59:47

其他回答

我也知道这条路。

angular.element($('#__userProfile')).scope().close();

但我不太使用它，因为我不喜欢在angular代码中使用jQuery选择器。

2013-07-16 13:45:25

实际上，使用emit和broadcast效率很低，因为事件会在作用域层次结构中上下冒泡，这很容易导致复杂应用程序的性能瓶颈。

我建议使用服务。以下是我最近在我的一个项目https://gist.github.com/3384419中实现它的方法。

基本思想-将发布-订阅/事件总线注册为服务。然后在需要订阅或发布事件/主题的地方注入事件总线。

2012-08-18 04:32:39

看这个小提琴:http://jsfiddle.net/simpulton/XqDxG/

请观看以下视频:控制器之间的通信

Html:

<div ng-controller="ControllerZero">
  <input ng-model="message" >
  <button ng-click="handleClick(message);">LOG</button>
</div>

<div ng-controller="ControllerOne">
  <input ng-model="message" >
</div>

<div ng-controller="ControllerTwo">
  <input ng-model="message" >
</div>

javascript:

var myModule = angular.module('myModule', []);
myModule.factory('mySharedService', function($rootScope) {
  var sharedService = {};

  sharedService.message = '';

  sharedService.prepForBroadcast = function(msg) {
    this.message = msg;
    this.broadcastItem();
  };

  sharedService.broadcastItem = function() {
    $rootScope.$broadcast('handleBroadcast');
  };

  return sharedService;
});

function ControllerZero($scope, sharedService) {
  $scope.handleClick = function(msg) {
    sharedService.prepForBroadcast(msg);
  };

  $scope.$on('handleBroadcast', function() {
    $scope.message = sharedService.message;
  });        
}

function ControllerOne($scope, sharedService) {
  $scope.$on('handleBroadcast', function() {
    $scope.message = 'ONE: ' + sharedService.message;
  });        
}

function ControllerTwo($scope, sharedService) {
  $scope.$on('handleBroadcast', function() {
    $scope.message = 'TWO: ' + sharedService.message;
  });
}

ControllerZero.$inject = ['$scope', 'mySharedService'];        

ControllerOne.$inject = ['$scope', 'mySharedService'];

ControllerTwo.$inject = ['$scope', 'mySharedService'];

2012-08-07 13:40:05

下面是两个控制器共享服务数据的单页示例:

<!doctype html>
<html ng-app="project">
<head>
    <title>Angular: Service example</title>
    <script src="http://code.angularjs.org/angular-1.0.1.js"></script>
    <script>
var projectModule = angular.module('project',[]);

projectModule.factory('theService', function() {  
    return {
        thing : {
            x : 100
        }
    };
});

function FirstCtrl($scope, theService) {
    $scope.thing = theService.thing;
    $scope.name = "First Controller";
}

function SecondCtrl($scope, theService) {   
    $scope.someThing = theService.thing; 
    $scope.name = "Second Controller!";
}
    </script>
</head>
<body>  
    <div ng-controller="FirstCtrl">
        <h2>{{name}}</h2>
        <input ng-model="thing.x"/>         
    </div>

    <div ng-controller="SecondCtrl">
        <h2>{{name}}</h2>
        <input ng-model="someThing.x"/>             
    </div>
</body>
</html>

也在这里:https://gist.github.com/3595424

2012-09-02 06:51:53

有一个方法不依赖于服务$broadcast或$emit。它并不适用于所有情况，但如果你有两个相关的控制器可以抽象成指令，那么你可以在指令定义中使用require选项。这是ngModel和ngForm最可能的通信方式。你可以使用它在嵌套的指令控制器之间通信，或者在同一个元素上。

对于父母/孩子的情况，使用方法如下:

<div parent-directive>
  <div inner-directive></div>
</div>

在父指令中，使用要调用的方法，你应该在this(而不是$scope)上定义它们:

controller: function($scope) {
  this.publicMethodOnParentDirective = function() {
    // Do something
  }
}

在子指令定义上，你可以使用require选项，这样父控制器就被传递给了链接函数(这样你就可以从子指令的作用域调用它上的函数)。

require: '^parentDirective',
template: '<span ng-click="onClick()">Click on this to call parent directive</span>',
link: function link(scope, iElement, iAttrs, parentController) {
  scope.onClick = function() {
    parentController.publicMethodOnParentDirective();
  }
}

以上内容可以在http://plnkr.co/edit/poeq460VmQER8Gl9w8Oz?p=preview上看到

兄弟指令的用法类似，但两个指令都在同一个元素上:

<div directive1 directive2>
</div>

用于在directive1上创建一个方法:

controller: function($scope) {
  this.publicMethod = function() {
    // Do something
  }
}

在directive2中，可以使用require选项调用，这将导致siblingController被传递给link函数:

require: 'directive1',
template: '<span ng-click="onClick()">Click on this to call sibling directive1</span>',
link: function link(scope, iElement, iAttrs, siblingController) {
  scope.onClick = function() {
    siblingController.publicMethod();
  }
}

这可以在http://plnkr.co/edit/MUD2snf9zvadfnDXq85w?p=preview上看到。

它的用途是什么?

Parent: Any case where child elements need to "register" themselves with a parent. Much like the relationship between ngModel and ngForm. These can add certain behaviour that can affects models. You might have something purely DOM based as well, where a parent element needs to manage the positions of certain children, say to manage or react to scrolling. Sibling: allowing a directive to have its behaviour modified. ngModel is the classic case, to add parsers / validation to ngModel use on inputs.

2013-12-27 13:16:15

一个AngularJS控制器可以调用另一个控制器吗?

推荐文章

最新文章

标签