Ng-Click 不适用于编译指令答案

【问题标题】：Ng-Click is not working in directive with CompileNg-Click 不适用于编译指令
【发布时间】：2015-07-14 23:12:17
【问题描述】：

我正在编写一个相当简单的 AngularJS 指令，它是一个按钮。基本指令看起来像：

officeButton.directive('officeImageButton', function() {
    return {
        restrict: 'E',
        replace: false,
        scope: {
            isDefault: '@',
            control: '=',
            label: '@',
            image: '@'
        },
        template: '<div class="button-wrapper" ng-click="onClick()">' +
                    '<a href="#" class="button image-button">' +
                      '<img src="{{image}}" />' +
                      '<span>{{label}}</span>' +
                    '</a>' +
                  '</div>',
       // Reset of the code not included for readability - See below.
    }
}];

在这个指令中，我确实定义了一个控制器：

/**
 * @description
 * Provides the controller for the 'officeImageButton' control. In this controller, all the required methods and
 * other information is stored.
 */
controller: ['$scope', function($scope) {
    // Allows an API on the directive.
    $scope.api = $scope.control || {};

    /**
     * @kind            Click
     * @name            onClick
     *
     * @description
     * This function is executed when the user click's the button itself.
     */
    this.onClick = function() {
        if (typeof $scope.api.onClick === 'function') { $scope.api.onClick(); }
    }
}],

然后我有我的link 函数：

link: function(scope, element, attributes, controller) {
    /**
     * @kind            Event
     * @name            onClick
     *
     * @description
     * Executes when the user click's the button.
     */
    scope.onClick = function() {
        controller.onClick();
    }
}

由于在模板中，我确实有一个 ng-click 属性，所以当我单击按钮时会执行 scope.onClick 函数。这种行为是意料之中的。

但是现在，在我的指令中，我还需要使用编译功能才能正确呈现按钮，如下所示：

compile: function(element, attributes) {
    var floating = attributes['float'];
    // When there's floating, make sure to add the class 'floated' to the image.
    if (floating) { $('img', element).addClass('floated'); }
    // When there's right floating on the element, make sure to place the iamge after the <span> element.
    // In case of left floating, nothing needs to be changed.
    if (floating === 'right') {
        var imageElement = $('img', element);
        $(imageElement).remove();
        $('span', element).after(imageElement);
    }
},

但是有了这个 compile 函数，ng-click 就不再工作了。对我在这里做错了什么有任何不满吗？

亲切的问候

【问题讨论】：

标签： javascript jquery angularjs

【解决方案1】：

compile 函数的返回值是link 之前和之后的函数，因此当您定义compile 属性时，link 属性将被忽略。而且由于您没有在编译中返回该链接函数，因此 scope.onClick 不在范围内。

要修复，您需要进行一些重构：

compile: function(tElem, tAttrs){

   // whatever you do now

   return function link(scope, element, attrs, ctrl){
     scope.onClick = function() {
        ctrl.onClick();
     }
}

题外话：

另外，请注意您不需要在控制器中创建onClick。控制器在指令中的用途是充当require 它的其他指令的API。

我猜你的意思是让officeImageButton.onClick 像这样被另一个指令调用？如果你这样做了，那很好 - 但否则它是多余的 - 只需使用 link 函数来定义作用域上的元素。

【讨论】：