Angular view is not loading but controller is

Question

I have routes defined for a couple of views in Angular, one is the default 'Tickets' and the other is an edit view 'Ticket'. For some reason when I code the 'Edit' as a url the Ticket route opens fine. If I code the 'Edit' link using ng-click to run a method on the controller and change the location (ie. $location.path('/ticket/2')), it loads the correct controller 'TicketController' but never seems to load the view. In fact is loads the correct controller and then the default controller after that.

In the following Plunker you'll see two edit links for each detail item, 'Edit' is the url with an href set (works fine), the other 'Edit 2' is using the ng-click directive.

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);



}());

My gosh this code is a messy. Try looking at github.com/angular/angular-seed to get a good idea how to organize your controllers, app.js, etc. — Mohamed El Mahallawy
– Mohamed El Mahallawy, Commented Jul 3, 2014 at 16:41
@MohamedElMahallawy - thanks for the link, this isn't my production code just a simple mock up for demonstration purposes — Richard Edwards
– Richard Edwards, Commented Jul 3, 2014 at 18:12
@MohamedElMahallawy - I've thought about your comment for a while now and it really doesn't bring anything to the table. You should try and focus on solving the question instead criticizing the code. — Richard Edwards
– Richard Edwards, Commented Jul 4, 2014 at 2:31
Sorry should have been more supportive and useful. Just trying to help by pointing out a resource! — Mohamed El Mahallawy
– Mohamed El Mahallawy, Commented Jul 4, 2014 at 4:47

Pankaj Parkar · Accepted Answer · 2015-02-26 13:53:08Z

2

Just remove href="#" to href="" from tickets.html

Working Plunkr

edited Feb 26, 2015 at 13:53

answered Jul 3, 2014 at 16:48

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Gui · Accepted Answer · 2014-07-03 20:21:48Z

0

In the index.html you have to fix the extra double quote in ng-app as @brygiger said.

Also in tickets.html you have the extra # in href, it isn't needed as you can see here: 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

See the plunker for the fixed version

edited Jul 3, 2014 at 20:21

answered Jul 3, 2014 at 16:58

Gui

9,86310 gold badges44 silver badges55 bronze badges

Collectives™ on Stack Overflow

Angular view is not loading but controller is

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related