定义角度控制器和组件

Question

我想从一个角度组件的控制器中调用一个功能到另一个组件的控制器。我发现this的答案，但控制器的定义与我在后续教程中显示的不同，所以我很困惑我应该如何引用组件和模板。

这里是我目前根据官方公布的角度教程定义我的控制器之一

angular. 
    module('moduleName'). 
    component('firstComponent', { 
    templateUrl: 'url/to/template', 
    controller: function FirstController($scope) { 
     //I want to call a function in SecondController here 
    } 
    }); 

//in another component file 
angular. 
    module('moduleName'). 
    component('secondComponent', { 
    templateUrl: 'url/to/template', 
    controller: function SecondController($scope) { 
     //function here which will be called 
    } 
    }); 

说我重新构造他们像在例子中，我上面链接...

var app= angular.module("myApp",[]); 

app.controller('One', ['$scope', '$rootScope' 
    function($scope) { 
     $rootScope.$on("CallParentMethod", function(){ 
      $scope.parentmethod(); 
     }); 

     $scope.parentmethod = function() { 
      // task 
     } 
    } 
]); 

//in another file 
var app= angular.module("myApp",[]); 
app.controller('two', ['$scope', '$rootScope' 
    function($scope) { 
     $scope.childmethod = function() { 
      $rootScope.$emit("CallParentMethod", {}); 
     } 
    } 
]); 

我应该如何引用它们所属的每个控制器的组件以及它们各自的模板？我试图像上面链接的例子那样写它们，但没有发生任何事情。我没有得到任何错误，但从字面上看并没有发生任何事情。该页面上没有显示任何内容。它试图写入控制台，但没有出现。

Answer 1

你的第二块代码有正确的概念，但两个控制器都需要实例化才能工作。

这是一个可用的JSFiddle。 https://jsfiddle.net/reid_horton/rctx6o1g/

当您单击该按钮时，文本Hello from callerComponent!将显示在其下方。

HTML

<div ng-app="myApp"> 
    <caller-component></caller-component> 
    <callee-component><</callee-component> 
</div> 

JS

var app = angular.module("myApp", []); 

app.component("callerComponent", { 
    template: "<button ng-click='externalCall()'>Click Me!</button>", 
    controller: function ($scope, $rootScope) { 
     $scope.externalCall = function() { 
      $rootScope.$emit("setText"); 
     } 
    } 
}); 

app.component("calleeComponent", { 
    template: "<p>{{ myText }}</p>", 
    controller: function ($scope, $rootScope) { 
     $rootScope.$on("setText", function() { 
      $scope.myText = "Hello from callerComponent!" 
     }); 
    } 
});