gpt4 book ai didi

javascript - Promise 在 AngularJS 中得到两次解决

转载 作者:行者123 更新时间:2023-12-03 08:32:00 25 4
gpt4 key购买 nike

我正在学习将 AngularJS 与 requirejs 和 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>

这个骗子正在处理错误。当我在 Chrome 中查看网络时,json 文件( Chapter-1.json 和 Chapter-2.json )被加载/解析两次。

我还在不使用 requireJS 的情况下验证了代码,它工作正常(使用脚本标签手动加载脚本)。这些 promise 只会得到一次解决。因此,我在使用 requirejs 时做的一些配置不正确。

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

我该如何解决这个问题?

最佳答案

在 app.js 中,您将 storyController 指定为 main.story 状态的 Controller ,但您有一个 ng-controller="storyController" 在你的story.html 中。

结果是您正在初始化两个 storyController,并且每个都调用 .getText() 一次。

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

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

关于javascript - Promise 在 AngularJS 中得到两次解决,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33306093/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com