Question

我正在编写一个相当简单的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函数来正确呈现按钮，如下所示：

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将无效。对我在这里做错的事情有什么困难吗？

亲切的问候

Answer 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函数来定义范围内的元素。

使用Compile

1 个答案: