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

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

例如：

此 HTML 文档只是在文件中打印控制器传递的消息。MessageCtrlmessageCtrl.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(); 
    };
}

它只是打印当前日期;

如果我要添加另一个控制器，它将特定格式的日期交还给，将如何做到这一点？DI 框架似乎关注和访问服务。DateCtrlMessageCtrlXmlHttpRequests

分割线

网友回答：

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

最好的可能是共享服务：

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

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

分割线

网友回答：

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

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

<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'];

分割线

网友回答：

如果要将一个控制器调用到另一个控制器，有四种方法可用

$rootScope.$emit（）和 $rootScope.$broadcast（）
如果第二个控制器是子控制器，则可以使用父子通信。
使用服务
黑客 – 在 angular.element（）的帮助下

1. $rootScope.$emit（）和 $rootScope.$broadcast（）

控制器及其作用域可能会被销毁，
但$rootScope仍然存在于整个应用程序中，这就是我们采用$rootScope的原因，因为$rootScope是所有作用域的父级。

如果您正在执行从父级到子级的通信，甚至子项也想与其兄弟姐妹进行通信，则可以使用$broadcast

如果您正在执行从子级到父级的通信，则没有调用兄弟姐妹，则可以使用$rootScope.$emit

.HTML

<body ng-app="myApp">
    <div ng-controller="ParentCtrl" class="ng-scope">
      // ParentCtrl
      <div ng-controller="Sibling1" class="ng-scope">
        // Sibling first controller
      </div>
      <div ng-controller="Sibling2" class="ng-scope">
        // Sibling Second controller
        <div ng-controller="Child" class="ng-scope">
          // Child controller
        </div>
      </div>
    </div>
</body>

Angularjs Code

 var app =  angular.module('myApp',[]);//We will use it throughout the example 
    app.controller('Child', function($rootScope) {
      $rootScope.$emit('childEmit', 'Child calling parent');
      $rootScope.$broadcast('siblingAndParent');
    });

app.controller('Sibling1', function($rootScope) {
  $rootScope.$on('childEmit', function(event, data) {
    console.log(data + ' Inside Sibling one');
  });
  $rootScope.$on('siblingAndParent', function(event, data) {
    console.log('broadcast from child in parent');
  });
});

app.controller('Sibling2', function($rootScope) {
  $rootScope.$on('childEmit', function(event, data) {
    console.log(data + ' Inside Sibling two');
  });
  $rootScope.$on('siblingAndParent', function(event, data) {
    console.log('broadcast from child in parent');
  });
});

app.controller('ParentCtrl', function($rootScope) {
  $rootScope.$on('childEmit', function(event, data) {
    console.log(data + ' Inside parent controller');
  });
  $rootScope.$on('siblingAndParent', function(event, data) {
    console.log('broadcast from child in parent');
  });
});

在上面的代码控制台中$emit“childEmit”不会在子兄弟姐妹内部调用，并且只会在父级内部调用，其中$broadcast在兄弟姐妹和父级内部调用。这是性能进入操作的地方。如果您使用子级到父级的通信，则建议$emit因为它跳过了一些脏检查。

2. 如果第二个控制器是子控制器，则可以使用子控制器父通信

这是最好的方法之一，如果你想做子父母的沟通，孩子想与直接父母沟通，那么它不需要任何类型的$broadcast或$emit，但如果你想做从父母到孩子的沟通，那么你必须使用服务或$broadcast

例如 HTML：-

<div ng-controller="ParentCtrl">
 <div ng-controller="ChildCtrl">
 </div>
</div>

Angularjs

 app.controller('ParentCtrl', function($scope) {
   $scope.value='Its parent';
      });
  app.controller('ChildCtrl', function($scope) {
   console.log($scope.value);
  });

每当使用子级到父级通信时，Angularjs 都会在子级内部搜索一个变量，如果里面不存在，那么它将选择查看父控制器中的值。

3.使用服务

AngularJS支持使用服务架构的“关注点分离”的概念。服务是JavaScript函数，只负责执行特定的任务。这使它们成为可维护和可测试的单个实体。用于使用 Angularjs 的依赖注入机制注入的服务。

Angularjs code：

app.service('communicate',function(){
  this.communicateValue='Hello';
});

app.controller('ParentCtrl',function(communicate){//Dependency Injection
  console.log(communicate.communicateValue+" Parent World");
});

app.controller('ChildCtrl',function(communicate){//Dependency Injection
  console.log(communicate.communicateValue+" Child World");
});

它将给出输出你好孩子世界和你好父母世界 .根据 Angular 文档的服务单例 – 依赖于服务的每个组件都会获得对服务工厂生成的单个实例的引用。

4.黑客 – 在 angular.element（）的帮助下

此方法通过其 Id / unique class.angular.element（）方法从元素中获取 scope（） $scope$scope方法返回元素，scope（）使用一个控制器在另一个控制器内的变量给出另一个变量变量不是一个好的做法。

.HTML：-

<div id='parent' ng-controller='ParentCtrl'>{{varParent}}
 <span ng-click='getValueFromChild()'>Click to get ValueFormChild</span>
 <div id='child' ng-controller='childCtrl'>{{varChild}}
   <span ng-click='getValueFromParent()'>Click to get ValueFormParent </span>
 </div>
</div>

Angularjs：-

app.controller('ParentCtrl',function($scope){
 $scope.varParent="Hello Parent";
  $scope.getValueFromChild=function(){
  var childScope=angular.element('#child').scope();
  console.log(childScope.varChild);
  }
});

app.controller('ChildCtrl',function($scope){
 $scope.varChild="Hello Child";
  $scope.getValueFromParent=function(){
  var parentScope=angular.element('#parent').scope();
  console.log(parentScope.varParent);
  }
});

在上面的代码控制器在 HTML 上显示自己的值，当您单击文本时，您将相应地在控制台中获得值。如果单击父控制器跨度，浏览器将控制台值为子级，反之亦然。

模板简介：该模板名称为【 HTML一个 AngularJS 控制器可以调用另一个控制器吗？】，大小是暂无信息，文档格式为.编程语言，推荐使用Sublime/Dreamweaver/HBuilder打开，作品中的图片，文字等数据均可修改，图片请在作品中选中图片替换即可，文字修改直接点击文字修改即可，您也可以新增或修改作品中的内容，该模板来自用户分享，如有侵权行为请联系网站客服处理。欢迎来懒人模板【HTML】栏目查找您需要的精美模板。