javascript - videos - foundation zurb tabs

Wrapping Foundation 4 revela en Angular

Question

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?

Answer 1

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.

Answer 2

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.