CODEWITHSUNDEEP
javascriptangularjsurl-routingangularjs-routingangularjs-controller
Richard Edwards
Richard Edwards

Reputation: 1399

Angular view is not loading but controller is

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



}());

Upvotes: 0

Views: 128

Answers (2)

Pankaj Parkar
Pankaj Parkar

Reputation: 136134

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

Working Plunkr

Upvotes: 2

Gui
Gui

Reputation: 9803

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

Upvotes: 0

Related Questions