AngularJS 不会切换视图答案

【问题标题】：AngularJS would not switch viewAngularJS 不会切换视图
【发布时间】：2015-09-24 05:55:59
【问题描述】：

单击“添加”按钮后，我正在尝试切换视图（请参见下面的代码）。但是，当我单击“添加”按钮时，唯一发生的事情是 "/addRecordType" 附加到浏览器中我的 URL 的末尾，而不是解析为 'templates/add-record-type.html' 作为配置指示它去做。为什么会发生这种情况，我怎样才能让它发挥作用？谢谢！

parserconfig.html

<!DOCTYPE html>
<html ng-app='parserconfigApp'>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <script src="https://code.angularjs.org/1.3.14/angular-route.min.js"></script>

    <title>Parser Config</title>
</head>

<body>
<div ng-controller='ParserConfigController as parserConfig'>
    <button ng-click="changeView('addRecordType')">Add</button>
</div>
    <script type="text/javascript" src="parserconfigApp.js"></script>
</body>
</html>

parserconfigApp.js

var app = angular.module('parserconfigApp', ['ngRoute']);

app.controller('ParserConfigController', ['$scope', '$location', function($scope, $location){        
    $scope.changeView = function(view) {
        $location.path(view);
    }
}]);


app.controller('AddRecordTypeController', ['$scope', function($scope){
}]);


app.config('$routeProvider',
    function($routeProvider) {
        $routeProvider.
            when('/recordTypeList', {
                templateUrl: '/parserconfig.html',
                controller: 'ParserConfigController'
            }).
            when('/addRecordType', {
                templateUrl: 'templates/add-record-type.html',
                controller: 'AddRecordTypeController'
            }).
            otherwise({
                redirectTo: '/recordTypeList'
            });
    });

【问题讨论】：

标签： javascript html angularjs view

【解决方案1】：

对不起，我的其他答案不太有用，我认为这可能是您的解决方案。

$location.path(view);

只会更改您的 URL，而不会实际加载新路由。如果你立即使用

$scope.$apply()

然后你应该移动到那条路线。

更多信息请见here

【讨论】：

【解决方案2】：

改用 location.url

        this.changeView = function(viewName){
            $location.url('/' + viewName);
        }

或者你可以使用 ui-router，它是一个增强的角度路由器，是 angular-route 的流行替代品

http://www.ng-newsletter.com/posts/angular-ui-router.html

【讨论】：

这并没有解决问题。不知道你试过没？
我在其他示例中看到了这项工作，现在无法在手机上尝试任何东西。

【解决方案3】：

when('/addRecordType', {
    templateUrl: 'templates/add-record-type.html',
    controller: 'AddRecordTypeController'
}).

应该是

when('/addRecordType', {
    templateUrl: '/templates/add-record-type.html', // Slash added
    controller: 'AddRecordTypeController'
}).

【讨论】：