如何在Angularjs中禁用ng show from指令

How to disable ng-show from directive in Angularjs

本文关键字：ng show from 指令 Angularjs      更新时间：2023-09-26

我正在使用一个指令来确定何时加载图像。在我看来，我有一个span，它有一个加载微调器，将由ng-show显示。默认值为TRUE。

<ion-spinner icon="android" ng-show="showSpinner"></ion-spinner>
<img ng-src="{{imageSrc}}" imageonload>

指令：

.directive('imageonload', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            element.bind('load', function() {
                /* HOW TO DISABLE showSpinner */
            });
            element.bind('error', function(){
                alert('error.');
            });
        }
    };
})

考虑到，在定义指令时没有指定scope属性，这意味着没有为指令创建作用域，指令使用其父级的作用域，因此可以执行以下操作：

element.bind('load', function() {
    scope.showSpinner = false;
});

更重要的是，应该使用scope.$apply，因为您正在处理Angular JS生命周期之外的DOM事件：

element.bind('load', function() {
    scope.$apply(function () {
        scope.showSpinner = false;
    });
});

但它应该经过检验。

您可以尝试使用$broadcast和$on将指令中的信息传送到控制器

在指令中：

scope.$broadcast('stopSpinner');

在控制器中：

$scope.$on('stopSpinner',function() {scope.showSpinner = false});

U可能需要使用rootscope而不是scope

var app = angular.module('MyApp', []);
app.controller('AppCtrl', function($scope) {
    $scope.showSpinner = true;
});
app.directive('imageonload', function($timeout) {
    return {
        restrict: 'A',
        scope: {
            showSpinner: '='
        },
        link: function(scope, element, attrs) {
            //emulate the delay to load an image, in the reality this line MUST be removed
            $timeout(function(){ scope.showSpinner = false; }, 1000);
            element.bind('load', function() {
                /* HOW TO DISABLE showSpinner */
                scope.showSpinner = false;
            });
            element.bind('error', function(){
                alert('error.');
            });
        }
    };
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<div ng-controller="AppCtrl" ng-cloak="" ng-app="MyApp">
    <div ng-show="showSpinner">Loading...</div>
    <img ng-src="{{imageSrc}}" imageonload show-spinner="showSpinner">
</div>

相关文章：