angularjs – 如何从指令部分调用ng-click？

选项1：

选项1是最简单的选择.然而,这很像一个解决方法,我不建议广泛使用它.您可以从传递给链接功能的元素获取控制器的范围,并在那里调用changePage：

link: function (scope,transclude) {
    if (!attrs.title) scope.title = "Default title";
    scope.changePage = element.scope().changePage; // <= Get parent scope from element,it will have changePage()
}

选项2：

如果您没有任何涉及在外部控制器中定义范围的逻辑(如您的示例中所示),则可以为您的指令定义内部控制器并在那里执行：

app.directive('plantStages',function ($compile) {
    return {
       ...
       controller: ['$scope',function($scope) {
           $scope.changePage = function(page) {
               var url = "corn.page.html#/"+page;
               console.log("Change page "+page+" with url "+url);
               alert("about to change page as follows: document.location.href = "+url);
           }
       }]
    };
});

选项3：

如果你想在不同的指令和控制器中重用changePage()中定义的逻辑,最好的方法是将逻辑移动到可能注入到控制器和指令的某个服务：

app.service('changePageService',function() {
    this.changePage = function(page) {
        var url = "corn.page.html#/"+page;
        console.log("Change page "+page+" with url "+url);
        alert("about to change page as follows: document.location.href = "+url);
    }
});

app.controller('myCtrl',$http,changePageService) {
    ...
    changePageService.changePage('page');
    ...
});

app.directive('plantStages',function ($compile) {
    ...
    controller: ['$scope','changePageService',function($scope,changePageService) {
        $scope.changePage = changePageService.changePage;
    }]
    ...
});

选项4：

您可以将一些代码(如changePage(页面))作为指令的某些属性的值传递,并将指令定义范围属性传递给’&’这将创建一个函数,该函数将在外部控制器的作用域中执行,并且参数传递给该函数.例：

JavaScript的

app.directive('plantStages',template: '<figure class="cornStages">
                        <p ng-transclude style="color: skyblue"></p>
                        <hr/>
                        <p ng-bind-html="title"></p>
                        <p ng-bind-html="subtitle"></p>
                        <ul>
                            <li ng-repeat="stage in stages" ng-click="changePage({page: stage})">{{stage}}</li>
                        </ul>
                    </figure>',title:'@',changePage:'&'
        },transclude) {
            if (!attrs.title) scope.title = "Default title";
        }
    };
});

HTML

<div ng-controller="myCtrl">
    Stages,<p ng-repeat="stage in stages">{{stage}}</p>
    <hr/>
    Plant stages
    <plant-stages 
        title="<b>Exploration<br/>du cycle</b>"
        subtitle="<em>This is a<br/>sub title</em>"
        stages="stages"
        change-page="changePage(page)"
    >
        Inner<br/>directive
    </plant-stages>

Plunker：http://plnkr.co/edit/s4CFI3wxs0SOmZVhUkC4?p=preview