檢查是否重新加載了子視圖； AngularJS，UI路由器

Question

我在angular js中使用ui-router來嵌套視圖。 我的一個父視圖中的指令要求監視是否重新加載了子視圖。 誰能告訴我如何查看視圖中的子視圖是否重新加載？

這是我的HTML

<body>
  <header myDirective></header>
  <div id="content" ui-view name="bodyContent"></div>
</body>

指令JS

myApp.directive('myDirective', function(){
return function(scope,element,attr){
    scope.$watch('$viewContentLoaded', function(){
        element.on("click", function(){
            // do something
        });

        element.parent().find('#content').on("click", function(){
            //do something
        })
    });
};
})

在這里， $watch語句僅$watch父視圖加載。 我需要做的是每次更改或重新加載子視圖（bodyContent）時都為#content添加事件偵聽器。

Answer 1

我能夠通過使用角度的狀態變化事件找到解決方案。 這是我解決問題的方法：

到目前為止，我一直在觀察父視圖的$ viewContentLoaded變量，它並沒有太多幫助。 我不得不觀看子視圖的$ viewContentLoaded變量。 因此，首先，我使用scope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState ))檢查“狀態更改成功” scope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState ))這里，變量event很重要。 它有一個我們關注的targetScope變量。 現在我所$viewContentLoaded就是看一下$viewContentLoaded的$viewContentLoaded變量並在其上添加事件偵聽器。 代碼看起來像這樣

myApp.directive('myDirective', function(){
    return function(scope,element,attr){
        scope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState){
            event.targetScope.$watch('$viewContentLoaded', function(){
                element.on("click", function(){
                    // do something
                });

                element.parent().find('#content').on("click", function(){
                    //do something
                })
            })

        });
    };
})

我希望其他人將從中受益。 :)

檢查是否重新加載了子視圖； AngularJS，UI路由器

問題描述

1 個解決方案

解決方案1
3 已采納 2014-06-20 09:57:19

檢查是否重新加載了子視圖； AngularJS，UI路由器

問題描述

1 個解決方案

解決方案1 3 已采納 2014-06-20 09:57:19

解決方案1
3 已采納 2014-06-20 09:57:19