Angularjs 在angular.js中以实际大小显示图像

我需要以实际大小显示图像，即使它比容器大。我尝试了使用Image变量的技巧，并使用了如下内容：

HTML:

此脚本可以工作，但只有在图像较大时单击按钮数次后才能工作

我应该怎么做才能让它在一次点击中工作

是否有比此更好的方法来发现图像大小？

您需要使用，否则在非角度事件处理程序中对

$scope

所做的任何更改都将无法正确处理：

img.onload = function () {
  $scope.$apply(function() {
    $scope.image.width = img.width;
    $scope.image.height = img.height;
    $scope.image.path = $scope.imageurl;
  });
}

---

也许根据指令“模式”重新构建整个过程还不晚。我对类似问题的解决方案（）获得了几票赞成票，这使我认为这是一种传统的方法。。看看：

HTML:
    <div ng-controller="MyCtrl">
        <input ng-model="image.tmp_path" type="url" />
        <button ng-click="loadimage()" type="button">Load Image</button>
        <img ng-src="{{image.path}}" preloadable />
    </div>

CSS:
    img[preloadable].empty{
        width:0; height:0;
    }

    img[preloadable]{
        width:auto; height:auto;
    }

JS:
    // Very "thin" controller:
    app.controller('MyCtrl', function($scope) {
       $scope.loadimage = function () {
            $scope.image.path = $scope.image.tmp_path;
       }
    });

    // View's logic placed in directive 
    app.directive('preloadable', function () {        
       return {
          link: function(scope, element) {
             element.addClass("empty");
             element.bind("load" , function(e){
                element.removeClass("empty");
             });
          }
       }
    });

HTML：
加载图像
CSS:
img[可预加载]。空{
宽度：0；高度：0；
}
img[可预加载]{
宽度：自动；高度：自动；
}
JS:
//非常“瘦”的控制器：
应用程序控制器（'MyCtrl'，函数（$scope）{
$scope.loadimage=函数（）{
$scope.image.path=$scope.image.tmp_路径；
}
});
//放置在指令中的视图逻辑
app.directive（'preload'，函数（）{
返回{
链接：功能（范围、元素）{
元素addClass（“空”）；
元素绑定（“加载”，函数（e）{
元素。removeClass（“空”）；
});
}
}
});

工作Plunk:

这对我来说很有效（使用twitter引导类）：

mainfile.js文件（在产品阵列中）：

index.html文件：

      <div class="gallery">
        <div class="img-wrap">
            <ul class="clearfix">
                <li class="small-image pull-left thumbnail">
                    <img ng-src="{{product.images.thumbnail}}" style="height:{{product.size.height}}em; width: {{product.size.width}}em" />
                </li>
          </ul>
        </div>
      </div>

谢谢！我发现，如果我把

$scope.$apply（）

在

$scope.image.path=$scope.imageurl之后，图像也被加载。哪个更好？@EndyTjahjono问得好，我不知道其中一个是否优于另一个：）据我所知，最好使用您的格式，因为它将使用angular的内置错误处理机制。将代码移动到指令-不要尝试在控制器内调用onload函数-阅读此处的最佳实践：@callmekatoutie您能详细说明吗？为什么将onload移动到指令更好？啊！这就是用指令替换$scope.$apply的方法。谢谢
HTML:
    <div ng-controller="MyCtrl">
        <input ng-model="image.tmp_path" type="url" />
        <button ng-click="loadimage()" type="button">Load Image</button>
        <img ng-src="{{image.path}}" preloadable />
    </div>

CSS:
    img[preloadable].empty{
        width:0; height:0;
    }

    img[preloadable]{
        width:auto; height:auto;
    }

JS:
    // Very "thin" controller:
    app.controller('MyCtrl', function($scope) {
       $scope.loadimage = function () {
            $scope.image.path = $scope.image.tmp_path;
       }
    });

    // View's logic placed in directive 
    app.directive('preloadable', function () {        
       return {
          link: function(scope, element) {
             element.addClass("empty");
             element.bind("load" , function(e){
                element.removeClass("empty");
             });
          }
       }
    });

{
  name: 'Custom Products',
  size: {width: 15, height: 15},      
  images:{thumbnail:"img/custom_products/full_custom_3.jpg"}
}

      <div class="gallery">
        <div class="img-wrap">
            <ul class="clearfix">
                <li class="small-image pull-left thumbnail">
                    <img ng-src="{{product.images.thumbnail}}" style="height:{{product.size.height}}em; width: {{product.size.width}}em" />
                </li>
          </ul>
        </div>
      </div>