Wrapping Foundation 4 ujawnia w Angular

Question

Nowość w Angular, starając się uzyskać harmonię z Zurb Foundation 4. Przykład; Próbuję użyć komponentu http://foundation.zurb.com/docs/components/reveal.html.

prosta podejście wydawało się zawijać jak dyrektyw:

directive('modal', function() { 
    return { 
     template: '<div ng-transclude id="notice" class="reveal-modal">' + 
        '<a close-modal></a>' + 
        '</div>', 
     restrict: 'E', 
     transclude: true, 
     replace: true, 
     scope: { 
      'done': '@', 
     }, 
     transclude: true, 
     link: function(SCOPE, element, attrs, ctrl) { 
      SCOPE.$watch('done', function (a) { 
       // close-modal 
      }); 
     } 
    } 
}). 
directive('closeModal', function() { 
    return { 
     template: '<a ng-transclude href="#" class="close-reveal-modal">x</a>', 
     restrict: 'A', 
     transclude: true, 
     replace: true 
    } 
}). 
directive('showModal', function() { 
    return { 
     template: '<a ng-transclude class="reveal-link" data-reveal-id="notice" href="#"></a>', 
     restrict: 'A', 
     transclude: true, 
     replace: true, 
    } 
}); 

Działa to dobrze, aż do punktu, na przykład, można korzystać z modal, aby pokazać różne zawiadomienia z szablonu:

<modal done=""> 
    <div ng-include src="'partials/notices/' + notice + '.html'"></div> 
    </modal> 
    <select ng-model="notice" ng-options="n for n in ['notice-1', 'notice-2']"> 
     <option value="">(blank)</option> 
    </select> 
    <a show-modal>show modal</a> 

Jednakże, gdy robi się lepki, to jeśli chcę wywołać tryb modalny/modalny ze sterownika/w określonym zdarzeniu (np. W zakresie $watch). Zakładam, że moja dyrektywa wymaga kontrolera, aby wywołać kliknięcie, ale czy byłaby to dobra praktyka kątowa?

Answer 1

Kontrolery nie powinny uruchamiać zdarzeń interfejsu użytkownika ani bezpośrednio manipulować elementami interfejsu użytkownika. Cały ten kod powinien znaleźć się w dyrektywach.

Co można zrobić, to:

1. powiązać bool w dyrektywie zakres do zakresu dominującej i dodać, że na zegarek. Myślę, że już to zrobiłeś. LUB
2. Wykonaj zakres. $ Emisji na kontrolerze i dodaj zakres. $ Obejrzyj na dyrektywie, aby zamknąć.

Answer 2

To pytanie jest bardzo stare i nie wiem, czy działa z Reveal. Ale ja owinięty bibliotekę skrzynki referencyjnej do kątowa tylko przez wywołanie metody .foundation() na metodzie .run (kątowa) z:

app.run(function ($rootScope) { 
    $rootScope.$on('$viewContentLoaded', function() { 
     $(document).foundation(); 
    }); 
}); 

który pracuje dla mnie. Domyślam się, że możesz również stworzyć dyrektywę do obsługi interakcji użytkownika.