角視圖未加載，但控制器已加載

Question

我在Angular中為幾個視圖定義了路由，一個是默認的“ Tickets”，另一個是編輯視圖“ Ticket”。 由於某種原因，當我將“ Edit”（編輯）編碼為URL時，Ticket路線可以正常打開。 如果我使用ng-click編碼“ Edit”鏈接以在控制器上運行方法並更改位置（即$ location.path（'/ ticket / 2'）），則它將加載正確的控制器“ TicketController”，但不會加載似乎加載視圖。 實際上是先加載正確的控制器，然后再加載默認控制器。

在下面的Plunker中，您將看到每個詳細信息的兩個編輯鏈接，“ Edit”是帶有href設置的URL（工作正常），另一個“ Edit 2”使用ng-click指令。

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

(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=""

工作朋克

Answer 2

在index.html中，您必須像@brygiger所說的那樣修復ng-app多余的雙引號。

同樣在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

請參閱固定器的插件