定義角度控制器和組件

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