Routing wierdness in angular with ui-routing

问题

Another question guys :) If I leave the templateUrl empty in my routing, the scope is queriable but no template showing. But if I write it just as in the linked plunker project, it makes the links unclickable :( but just for the li > a elements... also in plunker I cannot make it workable, don't know why... anyone? http://plnkr.co/edit/VKhhcSmepMTxBT7R5AuO

And here is the ap.js itself for helping

(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);
        }
    ]);

})();

回答1:

There is an updated plunker

I am not fully sure what you want to do with your root state, so I used it the way I do...

$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'
    });

As we can see, super parent state 'root' is not having url defined, and it does contain template (where all children be injected)

On the other hand, every state now declares its parent as a 'root'. It will mean, that all states do have access to resolves or any other common stuff later applied to root.

Easy way how to effect all states.. Hope this could help. Maybe check this for some more details: Angular JS - UI router page reload won't set the state

来源：https://stackoverflow.com/questions/29560836/routing-wierdness-in-angular-with-ui-routing