ブートストラップモーダルが解除された後、角度コントローラ内の関数を起動しようとしています

Question

私は基本的に、角度コントローラ内で特定のイベントリスナを行う方法を理解しようとしています。より具体的には、ブートストラップモードが解除されたとき、私は角度コントローラ内で機能を起動したいと思う。 jqueryでは、通常次のようなことができます：

$(.some-class).on('click', function() { 
    // do something 
}); 

私は画像をボタンとして持つサイドナビゲーションを持っています。アクティブでないときはグレーのボタンを、アクティブなときは赤のボタンを持っています。各ボタンはブートストラップモーダルを起動します。

<a type="button" data-toggle="modal" data-target="#overview" ng-click="launchOverview()"> 
    <img ng-src="{{ sideNavActive.overviewSrc }}" /><br /> 
    </a> 

と私は私のコントローラ内のオブジェクトを持っています：

私が使用している

$scope.sideNavActive = { 
     "overviewSrc": "img/side-nav/tab-overview-off.png", 
     "detailsSrc": "img/side-nav/tab-details-off.png", 
     "contactSrc": "img/side-nav/tab-contact-off.png" 
} 

ユーザーはサイドナビゲーションボタンのいずれかをクリックI NGクリック機能を持っていますボタンが "img /...- on.png"に変わり、ボタンが赤色（アクティブ）に変わります。ユーザーが別のサイドナビゲーションボタンをクリックすると、そのボタンは赤色になり、残りはグレーになります。

私がしようとしているのは、ユーザがモーダルの周りの薄くなった領域をクリックして消すことです。私はボタンをすべて灰色にリセットします。ブートストラップのドキュメントによれば、私は 'hidden.bs.modal'イベントの機能を起動することができますが、私はそれを私の角度コントローラで動作させることはできません。私は '#overview'が自分のモーダルのIDである次の関数を持っています。

$('#overview').on('hidden.bs.modal', function() { 
     console.log('function fired!!!!!'); 
     $scope.sideNavActive = { 
      "overviewSrc": "img/side-nav/tab-overview-off.png", 
      "detailsSrc": "img/side-nav/tab-details-off.png", 
      "contactSrc": "img/side-nav/tab-contact-off.png" 
     } 
     }) 

ただし、モーダルが解除されたときにこの関数は起動せず、理由を特定できません。私は、関数が実際に聞いているかどうかを確認するためにやった

ことの一つは、それを変更されます。

$('body').on('click', function() { 
    // function code here 
} 

、それが動作します。それは 'body'要素をリッスンしているので、どこでもクリックするたびに発生します。だから私はそれが聞いているが、何らかの理由で 'hidden.bs.modal'イベントが機能していないことを知っている。

Answer 1

あなたがまだいない場合、私はangle-ui-bootstrapモーダルを使用します：http://angular-ui.github.io/bootstrap/#!#modal。モーダルが却下されたときに実行されるモーダルインスタンス上でコールバック関数があります：

modalInstance.result.then(function (someObj) { 
     // success 
    }, function() { 
     // this code will be executed when the modal is dismissed 
     console.log('Modal dismissed at: ' + new Date()); 
    }); 

Answer 2

は、モーダルが却下されたときに、角度コントローラに機能を発射する方法を考え出しました。

angular.element(document).find('.modal').on('hidden.bs.modal', function(){ 
    // do something 
    console.log('function fired'); 
});