Angular JSとBootstrap Modalのデータバインディングの問題

Question

ブートストラップモーダルを使用しているときに角度jを使用してスコープの値を変更できません。基本的に私は、私がcontroller.jsファイルに保存したモーダルを開く関数を呼び出しています。そして、スコープの値を修正してモーダルダイアログボックスに表示しようとしています。

私のjsコンポーネントの1つにclickイベントを追加しました。

eventClick: function(event, element) { 
    var $scope = angular.element("#eRotaController").scope(); 
    $scope.OpenModal("addEventModal", false, event); 
} 

html要素（モーダルダイアログ）のパート：

<div class="modal-header"> 
    <button type="button" class="close" data-dismiss="modal">&times;</button> 
    <h4 class="modal-title">{{misc.modalTitles}}</h4> 
</div> 

最後にOpenModal機能や変数

// Variables 
$scope.misc = { 
    modalTitle: "", 
    showRemoveEvent : false 
}; 

$scope.OpenModal = function (modal, isNew, event) 
{ 
    if (isNew) { 
     $scope.misc.modalTitle = "Add new Event"; 
    } 
    else{ 
     $scope.misc.modalTitle = "Update event for: " + event.title; 
     $scope.misc.showRemoveEvent = true; 
     console.log($scope); 
    } 

    $("#" + modal).modal('show'); 
} 

それはすべての変更を反映していないOpenModal関数内でIは、例えばmodalTitleを更新モーダルを開くとき。

私はそれがモーダルな問題であるかどうかを調べるために簡単な例を作成しました。私が追加した

クイックテスト：

<button ng-click="OpenModal2()"></button> 
{{misc.showRemoveEvent}} 


$scope.OpenModal2 = function() 
{ 
    $scope.misc.modalTitle = "Update event for: " + event.title; 
    $scope.misc.showRemoveEvent = true; 
} 

正常に動作します。

だから、メソッドがhtml要素から直接呼び出されたときに正しく動作しますが、コントローラへの参照を使用してjsファイルから呼び出されたときに失敗：

var $scope = angular.element("#eRotaController").scope(); 

$scope.OpenModal("addEventModal", false, event); 

は動作しません

Answer 1

お試しください：

eventClick: function(event, element) { 
    var $scope = angular.element("#eRotaController").scope(); 
    $scope.$apply(function(){ 
     $scope.OpenModal("addEventModal", false, event); 
    }) 
}, 

eventClickが角度コンテキスト外の関数である場合、上記のコードが機能する場合があります。

Answer 2

は$uibModal使用してみてください - $uibModal documationを、それは次のようになります：

angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function ($scope, $uibModal, $log) { 

    $scope.items = ['item1', 'item2', 'item3']; 

    $scope.animationsEnabled = true; 
    //open modal 
    $scope.open = function (size) { 

    var modalInstance = $uibModal.open({ 
     animation: $scope.animationsEnabled, 
     templateUrl: 'myModalContent.html', 
     controller: 'ModalInstanceCtrl', 
     size: size, 
     resolve: { 
     items: function() { 
      return $scope.items; 
     } 
     } 
    }); 

    modalInstance.result.then(function (selectedItem) { 
     $scope.selected = selectedItem; 
    }, function() { 
     $log.info('Modal dismissed at: ' + new Date()); 
    }); 
    }; 

    $scope.toggleAnimation = function() { 
    $scope.animationsEnabled = !$scope.animationsEnabled; 
    }; 

});