11

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 的做法会很好吗？

4

2 回答 2

0

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

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

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

于 2014-01-05T17:14:15.540 回答
-1

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

你可以做的是：

  1. 将 Directive Scope 中的 bool 绑定到 Parent 范围并在其上添加监视。我想你已经这样做了。或者
  2. 在控制器上执行 scope.$broadcast 并在指令上添加 scope.$watch 以关闭。
于 2013-03-29T23:19:13.453 回答