包装基础4在Angular中显示

Question

Angular的新手,只是想与Zurb Foundation达成一致.举个例子; 我正在尝试使用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)触发close-modal/show-modal,它会变得粘滞.我假设我的指令需要一个控制器来触发点击,但是它会是一个好的角度练习吗？

Answer 1

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

你能做的是：

1. 将指令范围中的布尔值绑定到父范围并在其上添加监视。我想你已经这么做了。或者
2. 在控制器上执行scope.$broadcast，然后在指令上添加scope.$watch以关闭。