0

アプリで小さなモーダル フレームワークを作成しようとしています。

ここに私のコントローラーがあります：

function ModalCtrl($scope){
    $scope.openModal = function(name){
        $scope.modalStatus = true;
    }
    $scope.closeModal = function(name){
        $scope.modalStatus = false;
    }
    $scope.modal = function(){
        return $scope.modalStatus;
    }
    $scope.modalStatus = false;
}

HTMLは次のとおりです。

<div ng-controller="ModalCtrl">
  <div ng-show="modal()" class="modal_window">
    <h2>The title</h2>
    <span>The content</span>
    <a ng-click="closeModal()">Close</a>
  </div>
</div>

<div ng-controller="ModalCtrl">
    <a ng-click="openModal('xyz')">Open it up</a>
</div>

完全に機能しません..これ以上混乱することはありません

編集: jsfiddle で更新: http://jsfiddle.net/TeYfY/

4

1 に答える 1

3

コードを詳しくチェックしていませんが、ngClick はngController の外部で定義されているため、関数にアクセスできませんopenModal。スコープのメソッドにアクセスするには、コントローラー内で必要になります。たとえば、次のようになります。

<div ng-controller="ModalCtrl">
  <div ng-show="modal()" class="modal_window">
    <h2>The title</h2>
    <span>The content</span>
    <a ng-click="closeModal()">Close</a>
  </div>

  <a ng-click="openModal('xyz')">Open it up</a>
</div>

これ以上の問題がある場合は、お気軽に Plunker または jsFiddle を投稿して質問を更新してください。詳しく調べて回答を修正させていただきます。

PS: このコードはディレクティブに属します。

アップデート

OPは、別の場所からモーダルを制御したいとコメントで述べました。これは多くの場合、次のサービスで実現されます。

module.factory( 'ModalService', function () {
  var is_visible = false;

  return {
    isVisible: function ( value ) {
      if ( angular.isDefined( value ) ) {
        is_visible = value;
      } else {
        return is_visible;
      }
    }
  };
});

modal ディレクティブでは、サービスの状態をリッスンできます。

$scope.$watch( ModalService.isVisible, function ( status ) {
  $scope.isVisible = status;
});

また、遠く離れたコントローラーから、サービスのステータスを変更できます。

$scope.openModal = function () {
  ModalService.setVisible( true );
}

これは非常に不自然で、過度に単純化されていますが、ポイントを説明する必要があります。サービスに加えて、コンポーネント間の通信を実現するためにイベントを使用することもできますが、ほとんどの場合、サービスはよりクリーンです。

于 2013-01-21T06:53:37.587 に答える