使用 ui-routing 以角度路由奇怪

问题描述

另一个问题伙计们:)如果我在路由中将 templateUrl 留空，则范围是可查询的，但不显示模板.但是，如果我像在链接的 plunker 项目中一样编写它，它会使链接无法点击:( 但仅对于 li > a 元素......也在 plunker 中我无法使其可行，不知道为什么......有人吗?http://plnkr.co/edit/VKhhcSmepMTxBT7R5AuO

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

这里是 ap.js 本身的帮助

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

})();

推荐答案

有 一个更新的 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'
    });

正如我们所看到的，超级父状态 'root' 没有定义 url，它确实包含模板 (所有子项都被注入)

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

另一方面，现在每个状态都将其父级声明为根".这意味着，所有状态都可以访问解析或以后应用于 root 的任何其他常见内容.

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.

如何影响所有状态的简单方法..希望这会有所帮助.也许检查这个以获取更多详细信息:Angular JS - UI 路由器页面重新加载不会设置状态

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

这篇关于使用 ui-routing 以角度路由奇怪的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！