路由wierdness在角与UI的路由(Routing wierdness in angular w

2019-10-22 14:13发布

另一个问题球员:)如果我离开templateUrl在我的路由空,范围可查询,但没有模板的表现。 但是,如果我写它只是作为链接plunker项目,它使链接无法点击:(但只是为LI>一个元素...也plunker我不能让它可行的,不知道为什么...任何人? http://plnkr.co/edit/VKhhcSmepMTxBT7R5AuO

这里是ap.js本身帮助

(function(){
    var portApp = angular.module('portApp', ['ui.router']);

    portApp.config(function($stateProvider, $urlRouterProvider, $locationProvider) {
        $urlRouterProvider.otherwise('/home');
        $stateProvider
            .state('root', {
                url: '/home',
                abstract: true,
                templateUrl: 'views/listView.html',
                controller: 'ListController'
            })
            .state('home', {
                url: '/home',
                templateUrl: 'views/listView.html',
                controller: 'ListController'
            })
            .state('about', {
                url: '/about',
                templateUrl: 'views/resumeView.html'
            })
            .state('items', {
                url: '/items/:itemLink',
                templateUrl: 'views/itemView.html',    
                controller: 'ItemController'
            });
            $locationProvider.html5Mode(true);
    });

    portApp.factory("workFactory", function() {
        var works = [
        {
            Title: "Sprite",
            subTitle: "",
            Link: "sprite",
            Thumbnail: "img/portfolio02.png",
            Image: "img/ismont.png"
        },
        {
            Title: "Pepsi",
            subTitle: "Kristályvíz",
            Link: "pepsi",
            Thumbnail: "img/portfolio03.png",
            Image: "img/sanofimont.png"
        }
        ];
        return {
            list: function() {
                return works;
            },
            selected: function(detPath) {
                selected = works.filter(function(work) {
                    return work.Link == detPath;
                });
                return selected;
            }
        };
    });

    portApp.controller("ListController", ["$scope", "workFactory", 
        function($scope, workFactory) {
            $scope.allWorks = workFactory.list();
        }
    ]);

    portApp.controller("ItemController", ["$scope", "workFactory", "$stateParams",
        function($scope, workFactory, $stateParams) {
            var detPath = $stateParams.itemLink;
            //$scope.selectedWork = workFactory.selected(detPath);
            $scope.selectedWork = workFactory.selected(detPath)[0];
            alert($scope.selectedWork);
        }
    ]);

})();

Answer 1:

有一个更新的plunker

我不完全确定要与你的根的状态,做什么,所以我用它我的方式...

$stateProvider
    .state('root', {
        abstract: true,
        template: '<div ui-view=""></div>',
        resolve: {
          somedata: function(){return {}}
        }
    })
    .state('home', {
        parent: 'root',
        url: '/home',
        templateUrl: 'listView.html',
        controller: 'ListController'
    })
    .state('about', {
      parent: 'root',
        url: '/about',
        templateUrl: 'resumeView.html'
    })
    .state('items', {
       parent: 'root',
        url: '/items/:itemLink',
        templateUrl: 'itemView.html',    
        controller: 'ItemController'
    });

我们可以看到,超双亲状态'root'是不具有URL定义,它包含模板(这里所有的孩子注射)

在另一方面,每个国家现在宣布其父为“根”。 这将意味着,所有国家都能够获得解决或任何其他常见的东西,后来应用到根。

简单的方法如何影响所有国家..希望这会有所帮助。 也许这个检查的一些细节: 角JS - UI路由器页面重载不会将状态



文章来源: Routing wierdness in angular with ui-routing