Блог

Главная - Вопросы по программированию - Angular view не загружается, но контроллер есть

Angular view не загружается, но контроллер есть

#javascript #angularjs #url-routing #angularjs-routing #angularjs-controller

#javascript #angularjs #url-маршрутизация #angularjs-маршрутизация #angularjs-контроллер

Вопрос:

У меня есть маршруты, определенные для нескольких представлений в Angular, один из которых является «Билетами» по умолчанию, а другой — «Билетом» для редактирования. По какой-то причине, когда я кодирую ‘Edit’ в качестве URL, маршрут запроса открывается нормально. Если я закодирую ссылку «Редактировать» с помощью ng-click, чтобы запустить метод на контроллере и изменить местоположение (т. Е. $location.path(‘/ticket/2’)), он загружает правильный контроллер ‘TicketController’, но, похоже, никогда не загружает представление. На самом деле is загружает правильный контроллер, а затем контроллер по умолчанию после этого.

В следующем окне вы увидите две ссылки редактирования для каждого элемента сведений, ‘Edit’ — это URL с установленным href (работает нормально), другая ‘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);



}());

Комментарии:

1. Черт возьми, этот код беспорядочный. Попробуйте посмотреть на github.com/angular/angular-seed чтобы получить хорошее представление о том, как организовать ваши контроллеры, app.js и т.д.

2. @MohamedElMahallawy — спасибо за ссылку, это не мой производственный код, а простой макет для демонстрационных целей

3. @MohamedElMahallawy — Я некоторое время думал о вашем комментарии, и это действительно ничего не дает для обсуждения. Вы должны попытаться сосредоточиться на решении вопроса, а не критиковать код.

4. Извините, должен был быть более поддерживающим и полезным. Просто пытаюсь помочь, указав ресурс!

Ответ №1:

Просто удалите href="#" в href="" из tickets.html

Рабочий Plunkr

Ответ №2:

В index.html вы должны исправить дополнительные двойные кавычки в ng-app , как сказал @brygiger.

Также в 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

Исправленную версию смотрите на плунжере