Angularjs-禁用按钮,直到渲染图像

时间:2018-01-12 23:26:52

标签: angularjs

我正在使用角度,我需要在图像完全渲染后启用按钮,而不仅仅是加载。 我正在使用带有“ngf-thumbnail”的角度ng-file-upload

我在SO中找到了这个指令,但它不起作用。

在完全渲染图像之前,我的按钮始终处于启用状态。

由于这个问题“被georgeawg标记为重复”,我想说我的问题不同,因为我在SO中找到的其他类似问题没有解决我的问题。我在SO中发现的所有解决方案都存在同样的问题。

其他解决方案仅用于加载事件,而不是在图像完整呈现时。

我需要知道什么时候图像完全呈现不仅被加载。

这是一个显示问题的小提琴:https://jsfiddle.net/ghk07c1L/4/

//控制器

angular.module("fb_totem")
.controller('mycontroller', function($scope){
 $scope.loading=true;

 $scope.ImgLoaded=function(val){
    $scope.loading=false;
  }
})

//标记

 <img image-on-load="ImgLoaded" ngf-thumbnail="url_mobilePhoto"/>
 <button type="button" ng-click="cancel()" ng-disabled="loading">Some Action</button>

//指令

angular.module("fb_totem")
.directive('imageOnLoad', function() {
        return {
            restrict: 'A',
            link: function(scope, element, attrs) {
                element.bind('load', function() {
                    scope.$apply(attrs.imageOnLoad)(true);
                });
                element.bind('error', function(){
                  scope.$apply(attrs.imageOnLoad)(false);
                });
            }
        };
    })

0 个答案:

没有答案