Ng-Click不适用于Compile指令

Question

I'm writing a fairly simple AngularJS directive which is a button. The basic directive does look like:

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.
    }
}];

Inside this directive, I do have a controller defined:

/**
 * @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(); }
    }
}],

And then I have my link function:

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

Since in the Template, I do have an ng-click attribute, the scope.onClick function is executed when I click the button. This behaviour is expected.

But now, in my directive, I need to also use the compile function in order to render the button correctly which is showed below:

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);
    }
},

But with this compile function included the ng-click isn't working anymore. Any toughts on what I'm doing wrong here?

Kind regards

Answer 1

A compile function's return value is the pre- and post- link functions, so when you define a compile property, the link property is ignored. And since you are not returning that link function in the compile, the scope.onClick is not on the scope.

To fix, you'd need to refactor a bit:

compile: function(tElem, tAttrs){

   // whatever you do now

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

Off-topic:

Also, note that you don't need to create an onClick in the controller. The controller's use in the directive is to act as an API to other directives that require it.

I presume that you did mean to have officeImageButton.onClick to be invoked like that by another directive? If you did, that's fine - but otherwise it is redundant - just use the link function to define elements on the scope.