以角度表示的包裹基础4分隔缝

Question

我是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中)从控制器/触发关闭模式/显示模式时，问题就变得棘手了。我假设我的指令需要一个控制器来触发点击，但这会是一个很好的角度练习吗？

Answer 1

这个问题由来已久，我不知道它是否适用于don。但我只是通过调用Angular的.run()方法上的.foundation()方法将dropbox库包装到了angular中：

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

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

Answer 2

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

您可以做的是：

1. 将指令作用域中的布尔绑定到父作用域，并在其上添加监视。我想你已经这么做了。或者在控制器上执行scope.$

，然后在指令中添加scope.$

1. 以关闭then。