从指令 AngularJs 触发控制器范围

Question

我有一个TimelineController，在作用域上有一个publish 函数，它将向服务器发送一些数据。

我的时间线由2个directives组成

• 时间线（元素）
• 分享帖子（元素）

我希望能够从share-post 指令中调用我的TimelineController 上的publish 函数，这可能吗？

控制器

function TimelineController($scope,TimelineService)
    {
        $scope.posts = [];

        $scope.publish = function(wall_type,wall_id,text,video,image) {
            console.log('click controller');
            TimelineService.publishPost(wall_type,wall_id,text,video,image).$promise.then(function(result){
               $scope.posts.push(result.response);
            });
        };
    }

时间线指令：

function timelineDirective() {

        return {
            restrict: 'E',
            replace: true,
            scope: {
                type: '@',
                ids: '@',
                postime: '&',
                posts: '='
            },
            templateUrl:"/js/templates/timeline/post-tmpl.html",
            controller: function($scope,$element) {

                this.type = $element.attr('type');
                this.ids = $element.attr('ids');
            }
        }
    };

时间线指令模板

<ol class="timeline" ng-init="postime({wall_type:type,wall_id:ids})">
    <li>
       <share-post></share-post>
    </li>
    <li ng-repeat="post in posts">
       {{post.text}}
    </li>
</ol>

SharePost 指令：我想通过这个指令调用 TimelineController 上的发布

function sharePost() {

        return {
            restrict: 'E',
            replace: true,
            require: "^timeline",
            templateUrl:"/js/templates/timeline/share-tmpl.html",
            link: function($scope,$element,$attr,ctrl) {
                $scope.pub = function() {

                    // This does not work because it call the parent directive
                    // Instead of controller
                    $scope.publish(ctrl.type, ctrl.ids, $scope.text);
                }
            }
        }
    };

分享发布指令模板

<div class="module comment">
    <div class="content">
        <textarea class="form-control" ng-model="text" placeholder="What is going on..." rows="2"></textarea>
    </div>

    <button type="button" class="btn" ng-click="pub()"> Share</button>

</div>

Answer 1

您使用指令只是绑定来自控制器的事件点击，例如：

angular.module('module').directive('sharePost', [
        function(){
            return {
                link: function (scope, element, attr) {
                    var clickAction = attr.clickAction;
                    element.bind('click',function (event) {
                        scope.$eval(clickAction);
                    });
                }
            };
    }]);

html

 <a sharePost click-action="publish(wall_type,wall_id,text,video,image)"> publish</a>

Answer 2

更改您的指令以在onPublish: "@" 之类的范围内添加一个额外的项目，然后在您的 html 中，您可以将指针传递给您想要调用的控制器函数，如下所示：

 <share-post on-publish="publish"></share-post>

从你必须做的指令中调用它：

$scope.onPublish()(ctrl.type, ctrl.ids, $scope.text)