Angular JS和Bootstrap模式的數據綁定問題

使用引導模式時，我無法使用角度js更改範圍值。基本上我打電話功能來打開我存儲在controller.js文件中的模態，然後我試圖修改範圍值並將它們顯示在模態對話框中。Angular JS和Bootstrap模式的數據綁定問題

我添加了click事件給我的一個js組件。

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函數內部更新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);

不工作

來源

2016-06-20 Adam Bielecki

其實模態bootstrap沒有任何與它做。我試圖在OpenModal中更改範圍值，但仍然無效。 –

我強烈建議你使用[ui-bootstrap]（https://angular-ui.github.io/bootstrap/）而不是常規bootstrap，它的引導實現在角度上（讓你的代碼乾淨的指令等） –

Thanks Martijn ，但經過進一步調查後，bootstrap並不是問題。基本上我從js調用的函數不是直接來自DOM，而是更新範圍值，但是它並不反映DOM上的更改。 –

嘗試做：

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

如果eventClick是角度上下文外的函數，那麼上面的代碼可能會工作。

來源

2016-06-20 11:57:31

謝謝！你先生當之無愧的獎章。 –

嘗試使用$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; 
    }; 

});

來源

2016-06-20 10:29:53

Angular JS和Bootstrap模式的數據綁定問題

回答

相關問題