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>

ただし、粘着性が生じるのは、特定のイベント (例: 内) で、コントローラーから close-modal/show-modal をトリガーしたい場合です$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 に答える