在 AngularJS 应用程序中访问 Zurb Foundation for Apps 模块

Question

我正在使用 Foundation for Apps 开发 AngularJS 应用程序。在我的布局中，我在顶部菜单中使用了 Foundation Apps 面板

<div zf-panel="" id="topMenu" position="top" class="panel-fixed">...</div>

我想在我的 AngularJS 应用程序中清楚地访问面板的状态。我浏览了文档 here，我能做的最好的事情就是在我的 [=27] 中状态发生变化（"toggle"、"open" 或 "close" 时收到警报=]:

.run([
    '$rootScope',
    'FoundationApi',
    function ($rootScope, FoundationApi) {
        FoundationApi.subscribe('topMenu', function(event) {
            console.log(event);
        })
    }
]);

在 Ng-Inspector 中，我可以在 $rootScope 下看到 Panel 模块 (zfPanel)，其中有一个名为 "active" 的布尔值属性，但到目前为止我可以访问它的唯一方法是这个:

$rootScope.menuClosed = true;
FoundationApi.subscribe('topMenu', function(event) {
    $rootScope.menuClosed = angular.element('#topMenu').isolateScope().active;
})

我想在应用程序的其他部分连接到 Foundation Apps 模块，有更简洁的方法吗？

Answer 1

最终，我找到了一种干净的方法来使用 Foundation API 事件，而无需在 DOM 元素上调用 isolateScope：

    FoundationApi.subscribe('topMenu', function(event) {
        if (event === 'close') {
            $rootScope.menuClosed = true;
        } else if (event === 'open') {
            $rootScope.menuClosed = false;
        } else { 
            // event === 'toggle'
            $rootScope.menuClosed = !$rootScope.menuClosed;
        };
    })

在 AngularJS 应用程序中访问 Zurb Foundation for Apps 模块

Access to Zurb Foundation for Apps modules in AngularJS App

javascript

zurb-foundation

angularjs