我创建了一个简单的div，其中包含带有“loading”gif的叠加层。
我希望能够显示/隐藏这个“加载器”并通过任何控制器访问它。
我相信我需要为此服务。这是我的简单代码无法正常工作：
MyApp.factory('loader', function() {
$(".loader").fadeIn();
});
然后在 controllers.js ：
MyApp.controller('MyController', function($scope, $rootScope, $auth, $state) {
$rootScope.loader;
});
但这没有任何作用。我是棱角分明的新人，我很欣赏一个解决这个问题的方向。
我基本上想要创建这样的东西：
loader.show（）;
loader.hide（）;
当然，如果有人认为这应该采用不同的方式，那么听一种更有效的方法会很棒。
答案 0 :(得分：4)
这样的东西？加载应用程序时，它将显示加载程序，1秒后加载程序将被隐藏。
var app = angular.module('app', []);
app.run(function($rootScope) {
$rootScope.showLoader = true;
})
app.controller('Ctrl', function($rootScope, $timeout) {
$timeout(function(){
$rootScope.showLoader = false;
},1000);
});<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="app" ng-controller="Ctrl">
<img ng-if='showLoader' src='http://www.arabianbusiness.com/skins/ab.main/gfx/loading_spinner.gif'>
</body>
答案 1 :(得分：1)
呃我真的独自一人，我很自豪。这里是遇到此人的代码。
MyApp.factory('loader', function() {
this.show = function(){
// show loader code..
}
this.hide = function(){
// hide loader code..
}
return this;
});
<强>用法：
loader.show/hide();
答案 2 :(得分：1)
要使用DOM元素，您必须使用directive。它们是为此而创建的。
jsfiddle上的实例。
angular.module('ExampleApp', [])
.controller('ExampleOneController', function($scope, $timeout) {
$scope.loading = false;
$scope.loading2 = false;
$scope.time1 = 1;
$scope.time2 = 4;
$scope.emulateRequest1 = function(time) {
$scope.loading1 = true;
console.log($scope.loading1,time);
$timeout(function() {
$scope.loading1 = false;
console.log($scope.loading1,time);
}, time * 1000)
};
$scope.emulateRequest2 = function(time) {
$scope.loading2 = true;
console.log($scope.loading2,time);
$timeout(function() {
$scope.loading2 = false;
console.log($scope.loading2,time);
}, time * 1000)
};
})
.directive('loading', function() {
return {
restrict: 'E',
scope: {
process: "="
},
template: '<div ng-show="process">Loading...</div>',
}
});;<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="ExampleApp">
<div ng-controller="ExampleOneController">
<h3>
ExampleOneController
</h3>
<form name="ExampleForm" id="ExampleForm">
<input ng-model="time1" placeholder="time in seconds">
<button ng-click="emulateRequest1(time1)">
Send emulate request
</button>
<br>
<input ng-model="time2" placeholder="time in seconds">
<button ng-click="emulateRequest2(time2)">
Send emulate request 2
</button>
<loading process="loading1"></loading>
<loading process="loading2"></loading>
</form>
</div>
</div>
带工厂的版本。此解决方案错误。
如果您发送的第一个请求执行了4秒，然后运行1秒，您可以看到加载div已经过去请求完成4秒。看看console。
angular.module('ExampleApp', [])
.controller('ExampleOneController', function($scope, $timeout,LoadingService) {
$scope.loadingService = LoadingService;
$scope.loadingService.loading = false;
$scope.time1 = 1;
$scope.time2 = 4;
$scope.emulateRequest = function(time) {
$scope.loadingService.loading = true;
console.log($scope.loadingService.loading,time);
$timeout(function() {
$scope.loadingService.loading = false;
console.log($scope.loadingService.loading,time);
}, time * 1000)
};
})
.service('LoadingService', function() {
return {
loading: false,
}
});;<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="ExampleApp">
<div ng-controller="ExampleOneController">
<h3>
ExampleOneController
</h3>
<form name="ExampleForm" id="ExampleForm">
<input ng-model="time1" placeholder="time in seconds">
<button ng-click="emulateRequest(time1)">
Send emulate request
</button>
<br>
<input ng-model="time2" placeholder="time in seconds">
<button ng-click="emulateRequest(time2)">
Send emulate request 2
</button>
<div ng-show="loadingService.loading">
loading...
</div>
<div ng-show="loadingService.loading">
loading...
</div>
</form>
</div>
</div>
答案 3 :(得分：0)
您必须在run函数中使用$ rootScope变量，并将其默认设置为true
angular.module('MyApp', [])
.run(function($rootScope) {
$rootScope.showLoader = true;
})
因此，无论何时页面加载它自动显示，现在隐藏它使用
$rootScope.showLoader = false;
MyApp.controller('MyController', function($scope, $rootScope, $auth, $state) {
$rootScope.showLoader = false;
});
对于装载机，无需使用服务。
答案 4 :(得分：0)
我不会使用$ rootScope，因为它使用的是angulars全局范围，几乎在所有情况下都应避免使用。您应该使用工厂来执行此操作，然后您可以将工厂注入您的父模块/控制器，它将可供您的整个应用程序使用。我建议你对代码进行模块化，并在核心模块中包含应用程序范围的方法。
以下是我将如何执行此操作的工作示例。 http://codepen.io/anon/pen/adQVjX
(function () {
'use strict';
angular
.module('myApp', [])
.controller('MyCtrl', Ctrl) // Using a named function makes the code more readable and allows other devs to quickly see all of the dependencies in a quick glance at the top of the module
.factory('loader', loader); // Let's create a loader factory which can contain any properties or methods associated with the loader.
Ctrl.$inject = ['loader']; // Inject the factory into the controller.
function Ctrl (loader) {
var ctrl = this; // This makes the rest of the code more readable and makes it clear what you are referencing in nested scopes.
ctrl.showLoader = loader.showLoader; // Set up a method on the controller that calls the associated method on the loader factory. This is really only necessary if you want to call this method from the controllers scope.
ctrl.hideLoader = loader.hideLoader; // ditto
return ctrl;
}
function loader () {
var loader = { // Create a loader object which has two methods defined.
hideLoader: hideLoader,
showLoader: showLoader
};
return loader; // Return our object to the controller.
function hideLoader () {
// Hide loader code goes here...
}
function showLoader () {
// Show loader code goes here...
}
}
})();
您可以在视图中使用类似的内容，但您可能只是从控制器内部调用这些方法。
<html ng-app='myApp'>
<body>
<div>
<div ng-controller='MyCtrl as ctrl'>
<button ng-click='ctrl.showLoader()'>
Show Loader
</button>
<button ng-click='ctrl.hideLoader()'>
Hide Loader
</button>
</div>
</div>
</body>
</html>