0

嘿，我正试图感受 Angular 并且遇到了一点障碍。

我有一个容器结构，如下所示：

<div class="main-container" ng-view>
    <!-- The below divs are constantly being 
         reloaded based on the current URL and it's associated view -->
    <div class="left-col">
    </div>
    <div class="right-col">
    </div>
</div>

在我实现 Angular 之前，我只有一个简单的脚本，它可以检查窗口的高度并相应地设置左列和右列 div 的高度。

使用 angular 可能有更好的方法来执行此操作，然后将事件函数附加到窗口对象。基本上我想在每次渲染新视图时触发一个函数，但不要在我的所有角度控制器中复制以下代码，如下所示：

$scope.$on('$viewContentLoaded', setColumnHeight);

任何帮助，将不胜感激。谢谢！

4

3 回答 3

2

I've solved this problem in my app by having a root "Application Controller" at the top of the DOM tree. For example:

<body ng-controller='applicationController'>
...
<div class="ng-view"></div>
...
</body>

applicationController is always there, and can set up bindings on its scope when it is created.

于 2013-01-10T05:03:40.307 回答
1

How about putting that event listener on the root scope:

$rootScope.$on('$viewContentLoaded', setColumnHeight);
于 2013-01-10T04:51:31.167 回答
0

你可以使用这样的东西：

<div class="main-container" ng-view>
    {{ setColumnHeight() }}
    <!-- The below divs are constantly being 
         reloaded based on the current URL and it's associated view -->
    <div class="left-col">
    </div>
    <div class="right-col">
    </div>
</div>

它会在每次渲染时检查高度，但是，这似乎有点过度处理。

The best approach would be to only update the height from both columns when the height of one of them changes. For that you could use DOM Mutation Observers, however they are not yet available on all browsers. If that's not a problem for you, check the mutation-summary lib.

If you are using jQuery you can also try this: https://github.com/jqui-dot-net/jQuery-mutate (examples here).

于 2013-01-09T23:43:12.360 回答