Angular视图没有加载，但控制器加载了

Question

我在Angular中为两个视图定义了路由，一个是默认的'Tickets'，另一个是编辑视图'Ticket'。出于某种原因，当我将"编辑"编码为url时，票务路线打开良好。如果我使用ng-click对"编辑"链接进行编码，以在控制器上运行方法并更改位置(例如:$location.path('/ticket/2'))，它加载正确的控制器'TicketController'，但似乎从未加载视图。实际上是加载正确的控制器，然后是默认的控制器。

在下面的Plunker中，您将看到每个细节项的两个编辑链接，' edit '是带有href集的url(工作正常)，另一个' edit 2'使用ng-click指令。

http://plnkr.co/edit/aY7fSvVJCIaVYnCHXcq6?p =

预览

(function () {
    var app = angular.module('SimpleTicket', ['ngRoute']);
    app.config(function ($httpProvider, $routeProvider) {
        $routeProvider.
            when('/ticket/:ticketId',
                {
                    templateUrl: 'ticket.html',
                    controller: 'TicketController as vm'
                }).
            when('/', {
                templateUrl: 'tickets.html',
                controller: 'TicketsController as vm'
            }).
            otherwise({
                redirectTo: '/'
            });
    });
    var TicketController = function ($scope, $log, $routeParams, $location) {
        var vm = this;
        $log.log('TicketController');
        var saveTicket = function () {
          $log.log('Item saved')
          $location.path('/');
        };
        vm.saveTicket = saveTicket;
        vm.ticket = {TicketId:2,Title:'Ticket 2',Body:'Body 2'};
    };
    app.controller("TicketController", TicketController);
    var TicketsController = function ($location, $log) {
        var vm = this;
        $log.log('TicketsController');
        var editTicket = function () {
            $log.log('editTicket');
            $location.path('/ticket/2');
        };
        vm.editTicket = editTicket;
        vm.tickets = [{TicketId:1,Title:'Ticket 1',Body:'Body 1'},
            {TicketId:2,Title:'Ticket 2',Body:'Body 2'}];
    };
    app.controller("TicketsController", TicketsController);

}());

Answer 1

从tickets.html中去掉href="#"到href=""

工作Plunkr

Answer 2

在index.html中，您必须修复ng-app中额外的双引号，如@brygiger所说。

同样在tickets.html中，您在href中有额外的#，这是不需要的，正如您在这里看到的:https://docs.angularjs.org/api/ng/directive/ngHref

<a ng-href="ticket/{{ticket.TicketId}}">edit</a> | 
<a href="" ng-click="vm.editTicket()">edit 2</a>
http://plnkr.co/edit/AuFnB7dV1YOkTuQiqxvg

固定版本见柱塞