第一次测试 ui-router 但目前正在测试事件，我似乎无法理解如何触发 $viewContentLoaded 或 Loading.虽然，我有 stageChangeSuccess 等工作！我只是将所有内容推送到 http://punkbit.com/space_competition/，但也在此处添加了一些代码.我希望在将新视图加载到 ui-view 时触发事件.但我想我在这里遗漏了一些东西！
<div class="pure-u-1" ui-view><!-- s: 模板部分 --><script type="text/ng-template" id="menu.html"><div class="pure-menu pure-menu-open pure-menu-horizontal"><ul><li><a href="#/home">home</a></li><li class="pure-menu-selected"><a href="#/like_gate">like_gate</a></li><li><a href="#/terms_and_conditions">terms_and_conditions</a></li><li><a href="#/enter_competition">enter_competition</a></li>
<script type="text/ng-template" id="home.html"><p>home.html 模板！fbLike 是 {{fbLike}}</p><script type="text/ng-template" id="enter_competition.html"><p>enter_competition.html 模板！</p><script type="text/ng-template" id="like_gate.html"><p>like.html 模板！</p><script type="text/ng-template" id="terms_and_conditions.html"><p>terms_and_conditions.html 模板！</p><!-- e: 模板部分 -->
main.js
angular.module("space_competition", ['ui.router']).config(function($stateProvider, $urlRouterProvider, $locationProvider){$stateProvider.state('家', {网址:'/家'，templateUrl: 'home.html',控制器:'homeCtrl'，解决: {fb_like: 'fbLike'}}).state('enter_competition', {url: '/enter_competition',templateUrl: 'enter_competition.html',控制器:'enterCompetitionCtrl'，解决: {fb_like: 'fbLike'}}).state('like_gate', {网址:'/like_gate'，templateUrl: 'like_gate.html',控制器:'likeGateCtrl'}).state('terms_and_conditions', {url: '/terms_and_conditions',templateUrl: 'terms_and_conditions.html',控制器:'termsAndConditionsCtrl'});$urlRouterProvider.otherwise("/home");//$locationProvider.hashPrefix('!');}).run(function($rootScope){$rootScope.$on('$stateChangeStart',功能(事件，toState，toParams，fromState，fromParams){console.log("状态变化:转换开始！");});$rootScope.$on('$stateChangeSuccess',功能(事件，toState，toParams，fromState，fromParams){console.log("状态改变:状态改变成功！");});$rootScope.$on('$stateChangeError',功能(事件，toState，toParams，fromState，fromParams){console.log("状态变化:错误！");});$rootScope.$on('$stateNotFound',功能(事件，toState，toParams，fromState，fromParams){console.log("状态变化:状态未找到！");});$rootScope.$on('$viewContentLoading',功能(事件，viewConfig){console.log("视图加载:视图加载完毕，DOM渲染完毕！");});$rootScope.$on('$viewcontentLoaded',功能(事件，viewConfig){console.log("视图加载:视图加载完毕，DOM渲染完毕！");});}).controller('homeCtrl', function($scope, fbLike){$scope.fbLike = fbLike.liked();}).controller('enterCompetitionCtrl', function($scope, fbLike){fbLike.liked();}).controller('likeGateCtrl', function($scope){}).controller('termsAndConditionsCtrl', function($scope){}).factory('fbLike', 函数($http, $q){返回 {喜欢:功能(){返回真；}};});有经验的可以看看吗?
谢谢:D
看起来你有 $viewcontentLoaded 而不是 $viewContentLoaded.您是否忘记将 C 大写?
Testing ui-router for the fist time but testing the Events at the moment and I can't seem to understand how to trigger $viewContentLoaded or Loading. Although, I've got stageChangeSuccess, etc working! I just pushed everything to http://punkbit.com/space_competition/ but also added some code here. I expected to trigger the events when a new view is loaded to ui-view. But I guess I'm missing something here!
<div class="pure-g">
<div class="pure-u-1" ui-view>
</div>
</div>
<!-- s: template partials -->
<script type="text/ng-template" id="menu.html">
<div class="pure-menu pure-menu-open pure-menu-horizontal">
<ul>
<li><a href="#/home">home</a></li>
<li class="pure-menu-selected"><a href="#/like_gate">like_gate</a></li>
<li><a href="#/terms_and_conditions">terms_and_conditions</a></li>
<li><a href="#/enter_competition">enter_competition</a></li>
</ul>
</div>
</script>
<script type="text/ng-template" id="home.html">
<p>home.html template! fbLike is {{fbLike}}</p>
</script>
<script type="text/ng-template" id="enter_competition.html">
<p>enter_competition.html template!</p>
</script>
<script type="text/ng-template" id="like_gate.html">
<p>like.html template!</p>
</script>
<script type="text/ng-template" id="terms_and_conditions.html">
<p>terms_and_conditions.html template!</p>
</script>
<!-- e: template partials -->
main.js
angular.module("space_competition", ['ui.router'])
.config(function($stateProvider, $urlRouterProvider, $locationProvider){
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'home.html',
controller: 'homeCtrl',
resolve: {
fb_like: 'fbLike'
}
})
.state('enter_competition', {
url: '/enter_competition',
templateUrl: 'enter_competition.html',
controller: 'enterCompetitionCtrl',
resolve: {
fb_like: 'fbLike'
}
})
.state('like_gate', {
url: '/like_gate',
templateUrl: 'like_gate.html',
controller: 'likeGateCtrl'
})
.state('terms_and_conditions', {
url: '/terms_and_conditions',
templateUrl: 'terms_and_conditions.html',
controller: 'termsAndConditionsCtrl'
});
$urlRouterProvider.otherwise("/home");
//$locationProvider.hashPrefix('!');
})
.run(function($rootScope){
$rootScope
.$on('$stateChangeStart',
function(event, toState, toParams, fromState, fromParams){
console.log("State Change: transition begins!");
});
$rootScope
.$on('$stateChangeSuccess',
function(event, toState, toParams, fromState, fromParams){
console.log("State Change: State change success!");
});
$rootScope
.$on('$stateChangeError',
function(event, toState, toParams, fromState, fromParams){
console.log("State Change: Error!");
});
$rootScope
.$on('$stateNotFound',
function(event, toState, toParams, fromState, fromParams){
console.log("State Change: State not found!");
});
$rootScope
.$on('$viewContentLoading',
function(event, viewConfig){
console.log("View Load: the view is loaded, and DOM rendered!");
});
$rootScope
.$on('$viewcontentLoaded',
function(event, viewConfig){
console.log("View Load: the view is loaded, and DOM rendered!");
});
})
.controller('homeCtrl', function($scope, fbLike){
$scope.fbLike = fbLike.liked();
})
.controller('enterCompetitionCtrl', function($scope, fbLike){
fbLike.liked();
})
.controller('likeGateCtrl', function($scope){
})
.controller('termsAndConditionsCtrl', function($scope){
})
.factory('fbLike', function($http, $q){
return {
liked: function(){
return true;
}
};
});
Anyone experienced could have a look please ?
Thanks : D
it looks like you have $viewcontentLoaded instead of $viewContentLoaded. did you forget to camel-case-capitalize the C?
这篇关于如何触发 UI-Router View Load 事件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！