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

定义角度控制器和组件

1 个答案: