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

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

如果有 compile 函数，预计它将返回链接函数（来自 AngularJS Directive 文档）。我不确定为什么“控制器”没有运行——这很奇怪。这是您希望不太做作的示例的解决方法：

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
}