在解析和根 index.html 文件中访问 $rootScope
access $rootScope in resolve and root index.html file
两件事-
我的 index.html 头部有一个供应商脚本,我想向其传递环境特定变量。
<script type="text/javascript">!function () {analytics.load(--->code here<----);();</script>
我已将变量附加到 运行 块中的 $rootScope,但加载此 html 时它似乎没有准备好。我可以使用
记录相同的代码
<a data-ng-click="$log.log('code', code)">code</a>
但当 head 标签为 运行 时,它似乎没有准备好。
此外 - 我还有一些附加到 $rootScope 的其他值,这些值在解析 运行s 时不可用。它在服务中未定义。如果我在该服务中执行 console.log 并在 运行 块中执行 console.log ,则服务首先记录为未定义,然后在执行 运行 块时,它有设置正确。
我需要做什么才能在根 index.html 文件的头元素和解析中使用这些变量?
resolve: {
auth: ['service', function (service) {
return service.resolve()
}]
}
service.resolve 为页面呈现前所需的变量依赖调用许多不同的服务。
更新
我之前提到的resolve是一个$route.resolve函数。它在页面加载之前放置在 routeProvider 和 运行 中。
templateUrl: '/user.html',
controller: 'User',
controllerAs: 'user',
resolve: {
auth: ['service', function (service) {
return service.resolve()
}]
}
解析函数内容-
self.profilePromises().then(function (resp) {
//this resp object is an array of promises that are mostly put into rootscope and/or used as params for other app setup functions - all things that need to be ready before the page resolves
var map = self.resultMap
for (var i = 0; i < resp.length; i++) {
$rootScope[map[i]] = resp[i].data.data
switch (map[i]) {
case 'abc':
$rootScope.abc = resp[i].data
break
case 'def':
setUser(resp[i].data.data)
break
// etc
}
}
return $q.when({auth: true})
}, function (resp) {
return $q.reject({auth: false})
})
$route.resolve 可以接受多个必须在页面初始化之前执行的函数参数。这是我找到的获取加载页面所需变量的最佳方法。因此,它们通常是获取用于填充页面的用户数据的服务,例如在登录后。我试图附加到 rootScope 的这些变量来自我们的构建,它将传递与生产或 QA 相关的主机和端口参数。换句话说,我想在应用程序构建时根据环境分配这些域。
I have attached the variable to the $rootScope in the run block, but
it does not appear to be ready when this html is loaded.
当 angular 通过 bootstrapping 过程并创建 $injector
时,$rootScope
可用。 boostrapping 过程可以通过 ng-app
指令或 angular.bootstrap
方法启动。无论如何,这些必须在 DOM
准备就绪时调用,因为 angular 不能 bootstrap 没有 DOM
元素。 head
块中的所有脚本都在 之前 执行 DOM 准备就绪,因此此时您无法访问 $rootScope
。
两件事-
我的 index.html 头部有一个供应商脚本,我想向其传递环境特定变量。
<script type="text/javascript">!function () {analytics.load(--->code here<----);();</script>
我已将变量附加到 运行 块中的 $rootScope,但加载此 html 时它似乎没有准备好。我可以使用
记录相同的代码<a data-ng-click="$log.log('code', code)">code</a>
但当 head 标签为 运行 时,它似乎没有准备好。
此外 - 我还有一些附加到 $rootScope 的其他值,这些值在解析 运行s 时不可用。它在服务中未定义。如果我在该服务中执行 console.log 并在 运行 块中执行 console.log ,则服务首先记录为未定义,然后在执行 运行 块时,它有设置正确。
我需要做什么才能在根 index.html 文件的头元素和解析中使用这些变量?
resolve: {
auth: ['service', function (service) {
return service.resolve()
}]
}
service.resolve 为页面呈现前所需的变量依赖调用许多不同的服务。
更新
我之前提到的resolve是一个$route.resolve函数。它在页面加载之前放置在 routeProvider 和 运行 中。
templateUrl: '/user.html',
controller: 'User',
controllerAs: 'user',
resolve: {
auth: ['service', function (service) {
return service.resolve()
}]
}
解析函数内容-
self.profilePromises().then(function (resp) {
//this resp object is an array of promises that are mostly put into rootscope and/or used as params for other app setup functions - all things that need to be ready before the page resolves
var map = self.resultMap
for (var i = 0; i < resp.length; i++) {
$rootScope[map[i]] = resp[i].data.data
switch (map[i]) {
case 'abc':
$rootScope.abc = resp[i].data
break
case 'def':
setUser(resp[i].data.data)
break
// etc
}
}
return $q.when({auth: true})
}, function (resp) {
return $q.reject({auth: false})
})
$route.resolve 可以接受多个必须在页面初始化之前执行的函数参数。这是我找到的获取加载页面所需变量的最佳方法。因此,它们通常是获取用于填充页面的用户数据的服务,例如在登录后。我试图附加到 rootScope 的这些变量来自我们的构建,它将传递与生产或 QA 相关的主机和端口参数。换句话说,我想在应用程序构建时根据环境分配这些域。
当 angular 通过 bootstrapping 过程并创建I have attached the variable to the $rootScope in the run block, but it does not appear to be ready when this html is loaded.
$injector
时,$rootScope
可用。 boostrapping 过程可以通过 ng-app
指令或 angular.bootstrap
方法启动。无论如何,这些必须在 DOM
准备就绪时调用,因为 angular 不能 bootstrap 没有 DOM
元素。 head
块中的所有脚本都在 之前 执行 DOM 准备就绪,因此此时您无法访问 $rootScope
。