[英]Angular view is not loading but controller is
我在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);
}());
只需从tickets.html
删除href="#"
到href=""
在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
请参阅固定器的插件
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.