【问题标题】:How to trigger UI-Router View Load events?如何触发 UI-Router View Load 事件?
【发布时间】:2014-02-06 15:46:33
【问题描述】:

第一次测试 ui-router 但目前正在测试事件,我似乎无法理解如何触发 $viewContentLoaded 或加载。虽然,我有 stageChangeSuccess 等工作!我只是将所有内容推送到http://punkbit.com/space_competition/,但还在这里添加了一些代码。我希望在将新视图加载到 ui-view 时触发事件。但我想我在这里遗漏了一些东西!

    <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;
        }

    };

});

有经验的可以看看吗?

谢谢:D

【问题讨论】:

    标签: angularjs angular-ui angular-ui-router


    【解决方案1】:

    您似乎拥有$viewcontentLoaded 而不是$viewContentLoaded。你忘了把C 大写吗?

    【讨论】:

    • 非常感谢!我根本没有注意到,它对 $viewContentLoaded 很有效,没有注意到 :)
    • 当 dom 添加但在 angular 完成处理 dom 之前触发此事件。您可以通过添加 id 或类作为角度变量来测试它,并尝试使用 jQuery 在 $viewContentLoaded 中找到它。你不会找到它。
    【解决方案2】:

    $viewContentLoading 事件现在在 0.2.11 版中正确触发:修复(状态):allow view content loading broadcast

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2016-11-11
      • 2013-09-06
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2016-12-12
      • 2016-04-25
      • 2011-04-10
      相关资源
      最近更新 更多