javascript - 加载图像时在 AngularJS 中动态添加 ng-click

Question

我想在加载图像源时动态地将 ng-click 添加到元素。我现在正在这样做:

$scope.compile = function(element) {
  var el = angular.element(element);
  $scope = el.scope();
  $injector = el.injector();
  $injector.invoke(function($compile) {
    $compile(el)($scope)
  })
};

$scope.showImagePreview = function(url) {

  fabric.util.loadImage(url, function(image) {

    if (image) {
      $scope.$apply(function() {

        var myEl = angular.element(image);
        myEl.attr('ng-click', 'openImage()');
        $scope.compile(myEl);

        $('.img-preview').append(myEl);
        $scope.canOpenImage = true;
      });
    }
  });
};

但我不断收到错误 - 无法调用未定义的调用。我做错了什么？

Answer 1

嗯，m8，你没有提供你的漏洞代码，所以我不能给你一个完整的合格答案。 IMO你应该保持简单。您不需要 fabric.js、$compile、$scope.$apply、$injector 或 angular.element() 来创建这样简单的处理。您可以使用 native JavaScript 和 AngularJS 的强大功能轻松完成此任务。通过这种方式来看看这个简单的方法。

查看

<div ng-controller="MyCtrl">
   <a ng-click="openImage()">
     <img ng-src="{{src}}" ng-click="" loaded-state="imageLoaded" imageonload />
   </a>
</div>

AngularJS 应用程序

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

myApp.controller('MyCtrl', function ($scope) {
    $scope.src = 'https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150';
    $scope.imageLoaded = false;
    $scope.openImage = function () {
      if ($scope.imageLoaded) {
        //function allowed to execute when image was loaded
        console.log($scope.imageLoaded);
      }
    }
});

myApp.directive('imageonload', function() {
    return {
        restrict: 'A',
        scope: {
          loadedState: "="
        },
        link: function(scope, element, attrs) {
            element.bind('load', function() {
               scope.loadedState = true;
            });
        }
    };
});

>> Demo fiddle