1

アプリケーションにポップアップがほとんどありません。1 つは「About」を表示するためのもので、2 つ目は連絡先フォームを表示するためのものです。私が現在行っていることは、ポップアップ DOM 全体をテンプレートに入れ、次のようなカスタム ディレクティブを記述することです。

angular.module('app').directive('contactForm', function() {

  return {
    restrict: 'E',
    replace: true,
    scope: {},
    templateUrl: 'contactForm.html',
    controller: function($scope) {
      $scope.submitForm = function() {
        ...  
      }
    },
    link: function(scope, el) {
      scope.$on('openContactForm', function() {
        el.show();
      });
    }
  }

});

私のindex.htmlのどこかでそのようなディレクティブを呼び出します

<body>
  <about-popup></about-popup>
  <contact-form></contact-form>
  ...
  ...
</body>

ページのどこかに、ボタンに関数がバインドされた次のようなコントローラーがあります。

angular.module('app').controller('SideBarController', function($scope, $rootScope) {
  $scope.openContactForm = function() {
    $rootScope.$broadcast('openContactForm');
  }
});

それがそれを処理する最善の方法だとは思いませんが、これをより良く行う方法がわかりません。アイデアや例はありますか？

4

1 に答える 1

0

私が最後に行ったアプリでは、メッセージを表示するための単純なモーダルが必要でした。私が行った方法は、あなたのものと非常によく似たディレクティブを使用していました。

ディレクティブはテンプレートを追加し、$rootScope を使用してモーダル オブジェクトを格納します。このオブジェクトには属性 show (テンプレートの ng-show によって使用される) と、モーダルを表示/非表示にする必要があるたびに呼び出されるトグル関数があります。窓。オブジェクトは $rootScope にあるため、どこからでも使用できます。

これは、そのディレクティブの簡略化されたバージョンです。

app.directive('myModal', ['$rootScope', function ($rootScope) {
    return {
    restric: 'A',
    replace: true,
    template: '<div class="modal" ng-show="modal.show">{{ modal.mainMessage }}<br /><button ng-click="modal.toggle()">Close</button></div>',
    link: function (scope, elm, attrs) {
       $rootScope.modal= {
          mainMessage: '',
          show: false,
          toggle: function (mainMessage) {
             this.mainMessage = mainMessage;
             this.show = !this.show;
          }
       };
     }
  };
}]);

ここにJSBinがあります。

これは良い質問です。得られる答えに興味があります。

于 2013-09-09T12:08:25.573 に答える