AngularJs自定义指令抛出错误 [英] AngularJs custom Directive throwing error
问题描述
我正在尝试在我的angularjs应用程序中进行Ajax请求时添加带有叠加层的加载gif图像.每当我尝试加载我的应用程序时,我都会使用自定义指令-TypeError:elm.show not一个函数和TypeError:elm.hide不是一个函数
I am trying to add a loading gif image with a overlay while the ajax request is in progress in my angularjs app.I am using a custom directive whenever I try to load my app I get - TypeError: elm.show is not a function and TypeError: elm.hide is not a function
var app = angular.module(moduleName, [HomeModule, CommonModule, SearchModule, AnalyticsModule, 'templatecache']);
app.config(AppConfig);
app.directive('loading', ['$http', function ($http) {
return {
restrict: 'A',
link: function ($scope, $elm, $attrs) {
$scope.isLoading = function () {
return $http.pendingRequests.length > 0;
};
$scope.$watch($scope.isLoading, function (v) {
if (v) {
$elm.show();
} else {
$elm.hide();
}
});
}
};
}]);
app.controller('appController', AppController);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<body class="container-fluid" id="ng-app">
<div id="wrapper" ng-controller="appController">
<div class="loading-dialog" data-loading>
</div>
<!-- <span us-spinner spinner-key="spinner-comm"></span>-->
<div class="container-fluid" ng-controller="navTabController">...
推荐答案
AngularJs
使用 jqLite
作为选择器引擎,看来他们已经放弃了对 show/hide
功能的支持.为了解决这个问题,您可能应该在头部添加jquery或使用其他方法来 show/hide
元素.
AngularJs
uses jqLite
as the selector engine, and it seems that they've dropped support for show/hide
functionalities. In order to fix this you should probably include jquery in your head section or use another approach to show/hide
elements.
请注意,如果AngularJs检测到包含jQuery,它将使用jQuery而不是jqLite.
Note that if AngularJs detects that jQuery is included, it will use jQuery instead of jqLite.
这篇关于AngularJs自定义指令抛出错误的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!