Currently, I am developing an AngularJS application utilizing Foundation for Apps. One key element in my layout is a Foundation Apps panel that serves as the top menu.
<div zf-panel="" id="topMenu" position="top" class="panel-fixed">...</div>
I desire a seamless method to access the state of this panel within my AngularJS application. After reviewing the documentation here, I discovered that the best approach is to receive notifications when the state changes ("toggle", "open", or "close") in my app.js:
.run([
'$rootScope',
'FoundationApi',
function ($rootScope, FoundationApi) {
FoundationApi.subscribe('topMenu', function(event) {
console.log(event);
})
}
]);
While exploring Ng-Inspector, I noticed the Panel module (zfPanel) under $rootScope with a boolean property labeled "active". However, the only way I have managed to retrieve it so far is through code like this:
$rootScope.menuClosed = true;
FoundationApi.subscribe('topMenu', function(event) {
$rootScope.menuClosed = angular.element('#topMenu').isolateScope().active;
})
I am interested in establishing connections to other Foundation Apps modules within different sections of the application. Is there a more efficient and cleaner solution to achieve this?