Question

当我们尝试在编译阶段向元素添加ng-click函数（链接到控制器操作）时，它不起作用。

如果它在链接函数中，我们可以使它工作，但由于我们需要编译函数，因此不会调用该链接。

有人可以帮忙吗？

HTML：

<div ng-app="editApp" ng-controller="podCtrl">
  <a href="" data-model="image" data-cms-link-pod>
    <img />
  </a>
</div>

JS：

var module = angular.module('editApp', []);

module.directive('cmsLinkPod', function () {
    return {
        restrict: 'A',
        scope: {
            pod: '=model',
        },
        controller: function ($scope) {
            $scope.ohai = function () {
                console.log('click triggered')
                event.preventDefault();
            };
        },
        compile: function (element, attrs, transclude) {
            element.find('img').attr('ng-src', '{{pod.src}}');
            element.attr('data-ng-click', 'ohai()');
        }
    };
});

module.controller('podCtrl', ['$scope', function($scope) {
    $scope.image = {
        src: 'http://placekitten.com/100/100'
    }
}]);

请参阅此jsfiddle

Answer 1

似乎您错过了添加.find('img')

检查http://jsfiddle.net/js8N9/2/

已更新： http://jsfiddle.net/js8N9/3/

Answer 2

如果有编译功能，则需要返回链接功能（来自AngularJS指令文档）。我不确定为什么“控制器”没有运行 - 这很奇怪。以下是您希望不太费人的例子的解决方法：

http://jsfiddle.net/fWVYD/

其中compile函数返回链接函数。

compile: function (element, attrs, transclude) {
    ...
    //return linking function (can specify pre and post link)
    return function($scope) {
      $scope.ohai = function () {

      };  
    }
},
link: function($scope, $el, $attrs) {
    //will not be run
}

使用AngularJS编译绑定ng-click函数

2 个答案: