2015-10-23 60 views
0

我正在學習使用angularjs與requirejs和angular-ui-router。我在這裏創建了一個運動員http://plnkr.co/edit/iA8zVQWP3ypRFiZeRDzYPromises在AngularJS中解決兩次

<div ui-view ></div> 

<script data-main="require-config" src="http://requirejs.org/docs/release/2.1.20/r.js"></script> 

啓動index.html文件有要求-config.js參考它加載所需的第三方JavaScript庫,解決依賴自舉和我的模塊,它是在app.js

angular.element().ready(function() { 
     //bootstrap the app manually 
     angular.bootstrap(document,['myApp']); 
    }); 

我使用ui.router來解決相應的狀態和導航到相應的頁面

define(['angular', 'story' 
], function(angular) { 
    angular.module('myApp', ['ui.router', 'ui.bootstrap', 'myApp.story']) 
    .controller('TabController', ['$scope', '$state', function($scope, $state) { 
     $scope.tabs = [ 
      {route: 'main.story', label : "Promises", active : false}, 
      //more routes here. 
     ]; 

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

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

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

    }]) 

$ stateProvider將路由到合適的狀態。

config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) { 
    $stateProvider 
     .state('main', { 
     abstract: true, 
     url: '/main', 
     templateUrl: 'tabs.html', 
      controller: 'TabController' 
     })   
     .state('main.story', { 
     url: '/story', 
     templateUrl: 'story.html', 
      controller: 'storyController' 
     }) 
     $urlRouterProvider.otherwise('/main/story'); 
    }]) 

和ui.bootstrap使用bootstrap庫提供的標籤。

<tabset> 
     <tab 
      ng-repeat="t in tabs" 
      heading="{{t.label}}" 
      select="go(t.route)" 
      active="t.active"> 
     </tab> 
    </tabset> 

這個笨蛋正在與錯誤。當我查看Chrome中的網絡時,json文件(chapter-1.json和chapter-2.json)被加載/解析兩次。

我也驗證了不使用requireJS的代碼,它正在工作(手動使用腳本標記加載腳本)很好。承諾只能解決一次。所以,有一些配置在使用requirejs時我做得不正確。

我還驗證了使用$ httpProvider.interceptors加載兩次的文件。

我該如何解決這個問題?

回答

1

在app.js中,您指示storyController作爲您的main.story狀態的控制器,但您在story.html中有ng-controller="storyController"

結果是,您正在初始化兩個storyController s,每個調用.getText()一次。

您可以通過刪除ng-controller從story.html解決這個問題:

<body> 
    <div> 
    {{chapter1}}<br> 
    {{chapter2}} 
    </div> 
</body>