Javascript 为什么AngularJS视图没有';导航时不会改变吗?

Javascript 为什么AngularJS视图没有';导航时不会改变吗?,javascript,html,css,angularjs,angularjs-directive,Javascript,Html,Css,Angularjs,Angularjs Directive,我是新来安格拉斯的。我写了一些导航代码,工作非常完美。但当我集成到angularJs服务中时,它就停止工作了。它会更改浏览器URL,但视图不会更新。如果我将MetroPreLoader从我的服务中删除,那么它将再次工作 这是我的密码: 服务: voiceAppControllers.factory('appService', function ($http, $log, $window) { return { showWaitBar : function() {

我是新来安格拉斯的。我写了一些导航代码,工作非常完美。但当我集成到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()进行注释时,它就可以正常工作了

我大胆地错过了一些东西,但我不知道它是什么

蒂纳克斯

更新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>

仪表板

我必须承认我不是很有经验,看到更多的代码可能会让我受益,但我怀疑一个错误是“dashboard”的拼写不正确:“appService.routes.dahboard”您是否尝试过在$location.path之后添加$scope.$apply()?@AlexChoroshin不幸的是,我在这里没有看到任何与$scope相关的模板,所以我不知道$scope.$apply是否会有所不同。如果您还没有使用它,请让Batarang Chrome extension分阶段帮助调试。没有JS控制台错误?@ChrisBell没有JS控制台错误,没有更新视图,一切正常。