Question

我的指令如下：

.directive('ngImageOnLoad', function () {

    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            element.bind('load', function() {

                  scope.$apply(function (){
                      scope.$eval(attrs.ngImageOnLoad);
                  });

                  event.preventDefault();

            });
        }
    };
})

我的HTML img标签如下所示：

<img src="images/abc.jpg" ng-image-on-load="onImageLoad(this)" />

在我的控制器中我有：

    $scope.imageOnLoad = function(theImg)
    {
        console.log("theImg is: " + theImg); //This prints [Object Object]
        console.log("theImg.src: " + theImg.src); //This prints UNDEFINED!!
    }

问题：
为什么'this'引用无法正常工作。
我需要在我的函数imageOnLoad中访问image的src属性。但它没有定义！

Answer 1

您可以从事件对象传递target属性：

.directive('ngImageOnLoad', function () {

    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            element.bind('load', function(evt) {

                  scope.$apply(function (){
                      scope.$eval(attrs.ngImageOnLoad, { $element: evt.target});
                  });

                  evt.preventDefault();

            });
        }
    };
})

HTML

<img src="images/abc.jpg" ng-image-on-load="onImageLoad($element)" />

控制器

$scope.imageOnLoad = function(theImg)
{
    console.log("theImg is: " + theImg); //This prints [Object Object]
    console.log("theImg.src: " + theImg.src); 
}

Answer 2

为你创造了一个小提琴..结帐this

              scope.$apply(function (){
                  //scope.$eval(attrs.ngImageOnLoad);
                  $parse(attrs.ngImageOnLoad)(scope, {'this': element[0]});
              });

Answer 3

您可以通过$event（ref）获得所需内容。获取事件方法（ref）的元素，例如：

<img src="images/abc.jpg" ng-image-on-load="onImageLoad($event)" />

和

$scope.onImageLoad = function($event) {
    console.log("theImg.src: " + $event.target.src);
}

修改

正如评论中指出的那样$event不可用。像pixelbits和Kasper Lewau 已经回答的正确方法是使用$eval。为了完整起见，我也可以在这里加入：

链接功能将更改为：

link: function(scope, element, attrs) { var cb = $parse(attrs.ngImageOnLoad); element.bind('load', function(event) { scope.$apply(function() { cb({'$event':event}); }); event.preventDefault(); }); }

Answer 4

this指的是您目前正在使用的范围。

您可以将$parse服务注入您的指令并保持您的标记不变。

您的指令将如下所示：

.directive('ngImageOnLoad', function ($parse) {

    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            element.bind('load', function(e) {

                  $parse(attrs.ngImageOnLoad)(scope, { 
                    theImage: element
                  });

                  event.preventDefault();

            });

           /*
             // attrs.$observe option here - effectively does the same as .load(). 
             attrs.$observe('ngImageOnLoad', function (val) {
               if (val) {
                $parse(attrs.ngImageOnLoad)(scope, { 
                  theImage: element
                });                     
               }
             });
           */
        }
    };
})

你的标记：

<img src="images/abc.jpg" ng-image-on-load="onImageLoad(theImg)" />

通过将theImg: element传递给$parse函数，Angular将为我们处理绑定并将元素传递给控制器中的函数。这里的关键是匹配视图和指令中的参数名称。

在您的控制器中，您可以访问指令所附带的HTML元素及其所有属性（src）。

JsBin：http://jsbin.com/xigopuja/1/edit

编辑：在jsBin中遇到load事件时出现问题。切换attrs.$observe的行为。

更新了bin：http://jsbin.com/xigopuja/2/edit

AngularJS - 图像onload指令 - 这个'参考不起作用？

4 个答案: