在离子项目中添加ng-click到<img>

Question

im离子和角度上真的很新鲜，我需要在每个img元素中添加ng-click属性。我试图用$编译，但我总是有一些问题与错误，像

RangeError: Maximum call stack size exceeded

HTML

<img src="img/VIyNbAJ8TbeAQQo6Nm3m_Pic1.PNG" style="display: block; width: 100%; height: auto; margin-left: auto; margin-right: auto;"> 

controllers.js

.controller('modalCtrl', function($scope, $ionicModal, $compile) { 

$ionicModal.fromTemplateUrl('templates/modal.html', { 
    scope: $scope 
}).then(function(modal) { 
    $scope.modal = modal; 
}); 

$scope.openModal = function (event) { 
    $scope.modal.show(); 
    $scope.imgUrl = event.target.src; 
} 

directives.js

.directive('img', function ($compile) { 
return { 
    restrict: 'E', 
    link: function (scope, element) { 

     element.attr('ng-click', "openModal($event)"); 

     $compile(element)(scope); 
    } 
}; 

我怎么能在每个img中自动点击ng？ Tnx你。

Answer 1

而是编译一个ng-click指令，只需添加一个单击处理程序：

app.directive('img', function ($compile) { 
return { 
    restrict: 'E', 
    link: function (scope, element) { 

     //element.attr('ng-click', "openModal($event)"); 
     //$compile(element)(scope); 

     element.on("click", function(event) { 
      scope.$eval("openModal($event)", {$event: event}); 
      scope.$apply(); 
     }); 
    } 
};