为什么AngularJS视图在导航时不会改变?

时间:2014-03-24 18:51:24

标签: javascript html css angularjs angularjs-directive

我是angularJS的新手。我写了一些导航代码,这是完美的工作。但是当我将MetroPreLoader集成到angularJs服务中时,它就会停止工作。它会更改浏览器URL,但视图不会更新。如果我从我的服务中删除MetroPreLoader,那么它将再次运行。

这是我的代码:

服务:

voiceAppControllers.factory('appService', function ($http, $log, $window) {
    return {

        showWaitBar : function() {
            MetroPreLoader.setup({
                logoUrl: "Content/Images/logo.png",
                logoWidth: "100px",
                logoHeight: "100px",
                multipleBGColors: ["#CA3D3D", "#F58A16", "#32A237", "#A110E6"],
                delay: "Unlimited"
            });
            MetroPreLoader.run();
        },

        hideWaitbar : function() {
            MetroPreLoader.close();
        }
    };
})

控制器:

voiceAppControllers.controller('loginController', ['$scope', '$http', '$location', '$timeout', 'appService', 'notificationService',
    function ($scope, $http, $location,$timeout, appService, notificationService) {
        var onSuccess = function () {
            notificationService.pushNotifaction("service update successfully.");
        };

        var onError = function () {
            notificationService.pushNotifaction("service update fail.");
        };

        $scope.login = function () {
            var credentials = "grant_type=password&username=" + $scope.loginModel.Username + "&password=" + $scope.loginModel.Password;
            console.log(credentials);

            appService.showWaitBar();
            $http({
                method: 'POST',
                url: appService.loginUrl,
                data: credentials,
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
            })
                .success(function (data) {
                    console.log(data.access_token);
                    appService.updateAuthInfo(data.userName, data.access_token);
                    appService.hideWaitbar();
                    $location.path(appService.routes.dahboard);
                })
                .error(function () {
                    appService.clearAuthInfo();
                    appService.hideWaitbar();
                    $location.path(appService.routes.login);
                    notificationService.pushNotifaction("Login Fail. Wrong username and password.");
                });
        };

    }
]); 

当我评论appService.showWaitBar()appService.hideWaitbar()时,它的工作正常。

enter image description here

我肆无忌惮地想念一些东西,但不知道是不是。

Thnaks。

更新1:

我的App.js是:

var voiceAppControllers = angular.module('voiceAppControllers', []);

var voiceApp = angular.module('voiceApp', ['ngRoute', 'voiceAppControllers', 'kendo.directives']);

voiceApp.config(['$routeProvider',
  function ($routeProvider) {
      $routeProvider.
        when('/organization', {
            templateUrl: 'Templates/OrganizationTemplate.html',
            controller: 'organizationController'
        }).when('/service', {
            templateUrl: 'Templates/ServiceTemplate.html',
            controller: 'serviceController'
        }).when('/login', {
           templateUrl: 'Templates/LoginTemplate.html',
           controller: 'serviceController'
        }).when('/Dashboard', {
           templateUrl: 'Templates/DashboardTemplate.html',
           controller: 'dashboardController'
       }).
        otherwise({
            redirectTo: '/login'
        });
  }]);

登录视图是:

<div ng-controller="loginController">
    <form name="loginFrom" novalidate ng-submit="login(loginFrom)">
        <input type="hidden" ng-model="loginModel.Id" />

        <h1>Login</h1>
        <label>Need Some Text</label>
        <div>
            <label>username :</label>
            <div class="input-control text">
                <input type="text" placeholder="Your username" required ng-model="loginModel.Username" />
            </div>
        </div>
        <div>
            <label>password :</label>
            <div class="input-control password">
                <input type="password" placeholder="Your password" required ng-model="loginModel.Password" />
            </div>
        </div>
        <div class="offset3">
            <input class="primary" type="submit" value="UPDATE" ng-disabled="loginFrom.$invalid" />
        </div>
    </form>
</div>

我的仪表板视图是:

<div ng-controller="dashboardController">
    <h1>Dashboard</h1>
    <input type="button" value="Next" />
</div>

0 个答案:

没有答案