角度视图未加载，但控制器已加载答案

【问题标题】：Angular view is not loading but controller is角度视图未加载，但控制器已加载
【发布时间】：2014-08-24 21:11:05
【问题描述】：

我在 Angular 中为几个视图定义了路由，一个是默认的“票证”，另一个是编辑视图“票证”。出于某种原因，当我将“编辑”编码为 url 时，票务路线可以正常打开。如果我使用 ng-click 对“编辑”链接进行编码以在控制器上运行方法并更改位置（即 $location.path('/ticket/2')），它会加载正确的控制器 'TicketController' 但永远不会似乎加载视图。实际上是加载正确的控制器，然后加载默认控制器。

在下面的 Plunker 中，您将看到每个详细信息项目的两个编辑链接，“编辑”是带有 href 集的 url（工作正常），另一个“编辑 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);



}());

【问题讨论】：

天哪，这段代码太乱了。尝试查看github.com/angular/angular-seed，了解如何组织控制器、app.js 等。
@MohamedElMahallawy - 感谢您的链接，这不是我的生产代码，只是用于演示目的的简单模型
@MohamedElMahallawy - 我已经考虑了你的评论一段时间了，它真的没有带来任何好处。您应该尝试专注于解决问题，而不是批评代码。
对不起应该更支持和有用。只是想通过指出资源来提供帮助！

标签： javascript angularjs url-routing angularjs-routing angularjs-controller

【解决方案1】：

只需从tickets.html 中删除href="#" 到href=""

Working Plunkr

【讨论】：

【解决方案2】：

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

此外，在 ticket.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

查看固定版本的 plunker

【讨论】：