Wrapping Foundation 4 在 Angular 中展示答案

【问题标题】：Wrapping Foundation 4 reveal in AngularWrapping Foundation 4 在 Angular 中展示
【发布时间】：2013-02-24 00:45:25
【问题描述】：

Angular 新手，只是想与 Zurb Foundation 4 取得一些协调。一个恰当的例子；我正在尝试使用http://foundation.zurb.com/docs/components/reveal.html 组件。

直截了当的方法似乎是包装为指令：

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

这在某种程度上可以正常工作，例如，我可以使用模态显示来自模板的不同通知：

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

但是，如果我想在某个事件上（例如在$watch 内）从控制器/ 触发关闭模式/显示模式，就会变得棘手。我假设我的指令需要一个控制器来触发点击，但是 Angular 的做法会很好吗？

【问题讨论】：

你能加个小提琴/plnkr吗？

标签： javascript angularjs zurb-foundation angularjs-directive

【解决方案1】：

这个问题很老了，我不知道它是否适用于 Reveal。但是我只通过在 Angular 的 .run() 方法上调用 .foundation() 方法将 Dropbox 库包装到 Angular 中：

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

这对我有用。我猜你也可以创建一个指令来处理用户交互。

【讨论】：

【解决方案2】：

控制器不应直接触发 UI 事件，也不应直接操纵 UI 元素。所有这些代码都应该放在指令中。

你可以做的是：

将指令作用域中的布尔值绑定到父作用域并在其上添加监视。我想你已经这样做了。或
在控制器上执行 scope.$broadcast 并在指令上添加 scope.$watch 以关闭。

【讨论】：