Angular-- ui-router 未正确加载答案

【问题标题】：Angular-- ui-router not loading correctlyAngular-- ui-router 未正确加载
【发布时间】：2014-08-26 16:53:38
【问题描述】：

我有一个在 plnkr 中工作的 ui-router 链接选项卡，这是基于 k.Scott Allen's deep linking 选项卡构建的。我让它在plnkr 中完美运行，但是当我将它实现到我的应用程序中时它就不起作用了。我的应用程序是基于 anuglar-seed 构建的。就好像他们没有联系一样。我的标签或我的视图都不会出现。我的视图位于根应用程序目录 myApp/app/partials 中的 partials 目录中

我的应用程序

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

    });

我的控制器

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

我的主页面

<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>

【问题讨论】：

标签： angularjs tabs linker angular-ui-router

【解决方案1】：

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

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

【讨论】：

伙计，我希望事情就这么简单。我改变了它，仍然没有。
你在缩小你的 js 文件吗？如果你是，那么你需要以下列格式定义你的控制器、指令等。 .controller("tabController",["$rootScope", "$scope", "$state", function($rootScope, $scope, $state) {}])

【解决方案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"});

});

【讨论】：