zurb videos thumbnail javascript angularjs zurb-foundation angularjs-directive

javascript - videos - foundation zurb tabs



Wrapping Foundation 4 revela en Angular (2)

Esta pregunta es muy antigua y no sé si funciona con Reveal. Pero envolví la biblioteca de dropbox en Angular solo llamando al método .foundation () en el método .run () de angular:

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

Funciona para mi. Supongo que también puede crear una directiva para manejar la interacción del usuario.

Nuevo en Angular, solo tratando de conseguir un poco de armonía con la Fundación Zurb 4. Un buen ejemplo; Estoy intentando hacer uso del componente http://foundation.zurb.com/docs/components/reveal.html .

El enfoque directo parecía ser el de las directivas:

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, } });

Esto funciona bien hasta cierto punto, por ejemplo, puedo usar el modal para mostrar diferentes avisos de una plantilla:

<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>

Sin embargo, donde se vuelve pegajoso es si deseo desencadenar el modo cerrado / modal modal de un controlador / en un determinado evento (por ejemplo, dentro de $watch ). Supongo que mi directiva necesita un controlador para activar el clic, pero ¿sería buena práctica angular?


Los controladores no deben desencadenar eventos de IU directamente ni manipular los elementos de IU directamente. Se supone que todo ese código debe ir en directivas.

Lo que puedes hacer es:

  1. Vincula un bool en el alcance de la directiva al alcance principal y agrega un reloj sobre eso. Creo que ya hiciste eso. O
  2. Haga un scope. $ Broadcast en el controlador y agregue scope. $ Watch en la directiva para cerrar luego.