Question

我正在学习使用angularjs和angular-ui-router。我在这里创建了一个plunker http://plnkr.co/edit/iA8zVQWP3ypRFiZeRDzY？

<div ui-view ></div>

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

启动文件index.html引用了require-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>

这个plunker正在处理bug。当我在Chrome中查看网络时，json文件（chapter-1.json和chapter-2.json）将被加载/解析两次。

我还在不使用requireJS的情况下验证了代码，它正在运行（手动使用脚本标记加载脚本）。承诺只得到解决一次。因此，在使用requirejs时，我有一些配置错误。

我还使用$ httpProvider.interceptors验证了加载两次的文件。

我该如何解决这个问题？

Answer 1

在app.js中，您指示storyController为main.story州的控制者，但您的story.html中有ng-controller="storyController"。

结果是您正在初始化两个storyController，每个人都会调用.getText()一次。

您可以通过从story.html中删除ng-controller来解决此问题：

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

承诺在AngularJS中被解决两次

1 个答案: