Question

我有一个ui-router链接标签在plnkr中工作，这是由k.Scott Allen's deep linking标签构建的。我在plnkr中完美运行，但是当我将它实现到我的应用程序中时，它将无法正常工作。我的应用程序是由anuglar-seed构建的。这就像他们没有联系。我的标签或我的观点都没有出现。我的视图位于根应用程序目录myApp / app / partials

中的partials目录中

我的appjs

    'use strict'

    // Declare app level module which depends on filters, and services
    angular.module("myApp", ['ui.router', 
   'ngCookies',
  'ngResource',
  'ngSanitize',
  'iu.bootstrap',
  'ngGrid',
  'myApp.filters',
  'myApp.services',
  'myApp.directives',
  'myApp.controllers'
   ])

   .config(function($stateProvider, $urlRouterProvider){

        $urlRouterProvider.otherwise("main/firstTab");

        $stateProvider
            .state("main", { abtract: true, url:"partials/main", templateUrl:"main.html" })
                .state("main.firstTab", { url: "partials/firstTab", templateUrl: "firstTab.html" })
            .state("main.secondTab", { url: "partials/secondTab", templateUrl: "secondTab.html" })
                .state("main.thirdTab", { url: "partials/thirdTab", templateUrl: "thirdTab.html" })
            .state("main.fourthTab", {url: "partials/fourthTab", templateUrl: "fourthTab.html"});

    });

my controllerjs

'use strict';

/* Controllers */

angular.module('myApp.controllers', [])



    .controller("tabController", function($rootScope, $scope, $state) {     

        $scope.go = function(route){
            $state.go(route);
        };

        $scope.active = function(route){
            return $state.is(route);
        };

        $scope.tabs = [
            { heading: "firstTab", route:"main.firstTab", active:false },
            { heading: "secondTab", route:"main.secondTab", active:false },
            { heading: "thirdTab", route:"main.thirdTab", active:false },
            { Heading: "Reports"},
            { heading: "Reports", route:"main.fourthTab", active:false },
        ];

        $scope.$on("$stateChangeSuccess", function() {
            $scope.tabs.forEach(function(tab) {
                tab.active = $scope.active(tab.route);
            });
        });
    });

我的mainhtml

<div ng-controller="tabController">
<section  class=" span3 " style="float:left">
    <tabset vertical="true" type="pills">
        <tab 
            ng-repeat="t in tabs" 
            heading="{{t.heading}}"
            select="go(t.route)"
            active="t.active">
        </tab>
    </tabset>
</section>
<section class="span12 " >

<!--Content Blocks -->   

        <div class="tab-content" style="border-bottom-right-radius: 1em; min-height:400px; overflow: hidden;" > 

    <div ui-view></div>
    </div>
    </section>
</div>

索引中的

<html lang="en" ng-app="myApp" class="no-js">
<div ui-view></div>

Answer 1

angular.module("myApp", ['ui.router', 
   'ngCookies',
  'ngResource',
  'ngSanitize',
  'ui.bootstrap',
  'ngGrid',
  'myApp.filters',
  'myApp.services',
  'myApp.directives',
  'myApp.controllers'
   ]);

您需要将iu.bootstrap更改为ui.bootstrap.

Answer 2

解决方案是使用主页面和局部图的映射。他们不正确！

.config（function（$ stateProvider，$ urlRouterProvider）{

$urlRouterProvider.otherwise("partials/main/firstTab");

$stateProvider
    .state("main", { abtract: true, url:"/partials/main", templateUrl:"partials/main.html" })
        .state("main.firstTab", { url: "/partials/firstTab", templateUrl: "partials/firstTab.html" })
        .state("main.secondTab", { url: "/partialssecondTab/", templateUrl: "partials/secondTab.html" })
        .state("main.thirdTab", { url: "/partials/thirdTab", templateUrl: "partials/thirdTab.html" })
        .state("main.fourthTab", {url: "/partials/fourthTab", templateUrl: "partials/fourthTab.html"});

}）;

Angular - ui-router无法正确加载

2 个答案: