使用 ui.router 呈现的页面的 Angular JS 事件答案

【问题标题】：Angular JS event for page rendered using ui.router使用 ui.router 呈现的页面的 Angular JS 事件
【发布时间】：2013-11-22 15:25:02
【问题描述】：

背景场景：

我有一个 ng-repeat 填充我的视图，动态放大 <div> 容器。

渲染完成后，我需要调整<div> 的高度，并且我还需要在应用程序的每个其他页面上执行此操作。

我很清楚ready() 函数：

    angular.element(document).ready(function() {
        console.log('ready')
    })

但这段代码，放入app.js 只会在第一页打开（或重新加载）时执行。

重要提示：
我正在使用ui.router 浏览我的“页面”，所以每当我需要更改页面时，我都会调用“$state.transitionTo()”。

问题：是否有一个 Angular 事件会在页面完全呈现时被广播？

【问题讨论】：

标签： javascript angularjs angular-ui-router

【解决方案1】：

在寻找解决方案时，我发现有一个 ui.router 事件会在 DOM 完全呈现时被调用（在每个新的状态转换时）

事件是$viewContentLoaded，语法非常简单：

    $rootScope.$on('$viewContentLoaded', function (event) {
            console.log('lock & loaded')
    })

我认为这可能对其他人有用，
干杯

【讨论】：

这似乎被每个嵌套视图触发。有没有办法让它在整个页面被渲染时只触发一次？
我不再关注这个了，但整个事情似乎有点搞砸了。看看这个：github.com/angular-ui/ui-router/issues/685
我对它为每个嵌套视图触发感到沮丧。我利用lodash library's debounce 函数来限制它的触发频率，这为我解决了这个问题。

【解决方案2】：

你也可以像这样对 uirouter 使用 onEnter，

$stateProvider
    .state('printer',
    {
        url: "/printer",
        views:
        {
            "view":
            {
                templateUrl: "/static/tpls/cloud/app/printer.php"
            }
        },
        onEnter: function(){
            try {
                window.webkit.messageHandlers.pageIn.postMessage("enter printer page");
            } catch(err) {
                console.log('The native context does not exist yet');
            }
        },
        onExit: function(){
            try {
                window.webkit.messageHandlers.pageOut.postMessage("leave printer page");
            } catch(err) {
                console.log('The native context does not exist yet');
            }
            document.getElementById('liveMovie').style.height='30px';
        }
    })

【讨论】：