角度コントローラとコンポーネントを定義する

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

コードの2番目のブロックは正しいコンセプトを持っていますが、両方のコントローラーを動作させるためには両方のコントローラーをインスタンス化する必要があります。

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