angularjs - 在 AngularJs 中从父指令调用子指令函数

Question

如何在父指令的按钮单击监听器中调用子指令中定义的方法。

angular.module('editableDivDirective', [])

.directive("editableDiv", function() {
    var directive = {};
    directive.restrict = 'E';
    directive.replace = 'true';
    directive.scope = {};
    directive.transclude = 'true';
    directive.template =
        '<div id="wrapper">' +
            '<div required class="text-area" name="search" contenteditable="true" ng-model="formData.text"></div>' +
            '<button type="submit" class="btn btn-warning add-button" id="submit" ng-click="createTodo()">Add</button>' +
        '</div>';
    directive.link = function(scope, element, attrs, controller) {
        scope.createTodo = function(){
            // do something         
            // Call child directive setPlaceholderText()
        }
    };

    return directive;
})
.directive("contenteditable", function() {
    var directive = {};
    directive.require = ['^editableDiv','?ngModel'];
    directive.restrict = 'A';
    directive.scope = {};
    directive.link = function(scope, element, attrs, ctrls) {
        var ngModel = ctrls[1];
        var editableDivController = ctrls[0];

         function setPlaceholderText(){
            return element.html("Hello World");
        }

    return directive;
})

我想在调用父指令的“scope.createTodo()”时调用子指令setPlaceholderText()。

如何才能做到这一点。

Answer 1

在您的父指令中

link: function($scope,$el,$attr) {
    $el.find(".thing").on('click',function(event){
       $scope.$broadcast('thing', $scope.someData);
    });
}

在您的子指令中

link: function($scope. $el, $attr) {
    $scope.$on('thing',function(event, someData) {
       alert('My parent called me with this data: ' + someData);
    });
}