this is a jsbin showing the problem不过，我会在这里解释一下。我正在尝试使用 resolve 在进入路由之前运行一些代码，但是，它没有运行(因为 console.log 语句提供了更多详细信息)。 (因为它没有运行，我不确定我是否正确设置了模板中 resolve 的返回值)。为什么 resolve 没有运行？
var app = angular.module('jsbin', ['ngRoute'])
.config(function ($routeProvider) {
'use strict';
console.log("this runs");
var routeConfig = {
controller: 'DemoCtrll',
resolve: {
store: function (demoStorage) {
console.log("this doesn't log");
return demoStorage;
}
}
};
$routeProvider
.when('/', routeConfig)
.otherwise({
redirectTo: '/'
});
});
app.controller('DemoCtrl', function($scope, $routeParams, store) {
this.name = store;
});
app.factory('demoStorage', function () {
'use strict';
return "World";
});
html
<body ng-app="jsbin">
<div ng-controller="DemoCtrl as demo">
<h1>Hello {{name}}</h1>
</div>
最佳答案
您需要进行一些更改:
- 您不能使用
ng-controller指令以及 ng-view 的路由绑定(bind) Controller ，即在路由配置的 Controller 属性中设置 Controller 别名controller: 'DemoCtrl as demo',. - 当您使用 ng-controller 指令实例化 Controller 时，它不知道什么是
store提供者，因为不存在这样的提供者/服务。它是 Angular 路由器注入(inject)的特殊依赖项，只有路由器知道如何注入(inject)store作为 Controller 中的依赖项。这就是您使用ng-controller时出错的原因. - 你需要定义一个模板html或者一个模板绑定(bind)到
templateUrlrouteConfig 上的属性。即templateUrl:'demo.html', - 删除
ng-controller从 View 。 - 您需要使用
ng-view渲染 View 的指令。即在你的 index.html<ng-view></ng-view> - 由于您使用的是 Controller 别名，因此您可以将该属性称为
demo.name在路线呈现的 View 中。 - 您在 Controller 名称中也有错字 @
DemoCtrl1.
整体看起来像这样。
在 say Demo.html 中定义您的模板(在演示示例中，我使用了方便的脚本 type="text/ng-template" )
<div>
<h1>Hello {{demo.name}}</h1>
</div>
设置路由配置:
var routeConfig = {
templateUrl:'demo.html',
controller: 'DemoCtrl as demo',
resolve: {
store: function (demoStorage) {
console.log("this doesn't log");
return demoStorage;
}
}
};
另见 this answer虽然它使用 Angular ui-router，但概念是相同的。
关于javascript - 解决进入路线前不跑，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28036226/