如何在Angularjs中禁用ng show from指令
How to disable ng-show from directive in Angularjs
我正在使用一个指令来确定何时加载图像。在我看来,我有一个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>
相关文章:
- 使用angularjs ng Show/ng hide显示和隐藏不同的内容
- 我需要NG-IF/NG-SWITCH还是NG-SHOW&NG-HIDE
- 如何在AngularJS视图中使用promise(ng-show)
- AngularJS:如何使用java脚本函数更改跨度的ng-show条件
- ng show和ng hide don'I don’我一秒钟都不工作
- AngularJS:使用ng-show/hide动态维护下拉列表的3种状态(InProgress、Success、Err
- ng-show内容在页面加载过程中闪烁,尽管它不是真实的,并且ng-cloak不适用于FF
- 如何验证使用 ng-repeat、ng-show(角度)动态创建的输入
- 如何使用ng-repeat与清单模型进行ng-show
- AngularJS:ng-show不适用于ng-app
- 为什么我的html节点保持类ng隐藏属性ng show=true
- AngularJS:为什么ng show没有在IE11上运行
- Angularjs ng-show not working with checkbox with default val
- Angularjs - grouping ng show
- AngularJS:隐藏<td>使用ng-hide/ng-show没有间隙
- Angularjs ng-show == Id?
- 基于参数(angular)调用特定元素上的ng show
- 只有当我导航回窗口时,angular ng show才有效
- 使ng-show/ng-hide与由Angular之外的外部源修改的localStorage一起工作
- 是否可以使用相同的变量使ng if的行为类似于ng show/ng hide