更改jquery + bootstrap模態對話框div到BootStrap + angularjs

我在一個單一的jsp中有多個引導對話框div。更改jquery + bootstrap模態對話框div到BootStrap + angularjs

對話框的div看起來像下面

<div id="manage-notes-dialog" class="modal fade" role="dialog"> 
<div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
      <h3 id="about">NOTES <input name="backButton" type="button" value="&#8666; " class="btn btn-primary pull-right" /></h3> 
     </div> 
     <div class="modal-body"> 
      .......UI HTML......... 
      .......UI HTML......... 
     </div> 
     <div class="modal-footer"> 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     </div> 
    </div> 
</div> 
</div>

在我的jQuery按鈕點擊我打開對話框，如下

$("#manage-notes-dialog").modal('show');

以上jQuery的點擊操作的命令是一部分按鈕

我正在改變我的UI處理從jQuery到angularjs。

在編寫angularjs控制器並測試它之後，我寫下面的代碼打開上面的對話框。

$scope.openNotes = function() { 
    $("#manage-notes-dialog").modal('show'); 
};

這仍然不能完全使用angularjs作爲$("#manage-notes-dialog").modal('show');仍然是jQuery的，當我刪除了jQuery的js停止。

我想知道是否可以通過angularjs打開引導模式對話框。 我想避免從頭開始重寫所有模態對話框，因爲大量數據正在通過JSTL加載，因此使用angularjs。我對angularjs非常陌生並且在「Thinking in AngularJS」 if I have a jQuery background?中做了什麼並不那麼簡單

請建議可能的解決方法/解決方案步驟。我發現的大多數解決方案/示例都完全使用了angularjs模態指令。或個別的HTML。

我的約束是，我希望將所有的對話在一個單一的JSP，因爲他們將是通用的，我經過什麼馬修·格林在他的評論建議多個UI頁面

來源

2016-11-17 Acewin

使用內置角的實際指令：HTTP：//angular-ui.github。 io/bootstrap/ –

是的。我可以。但首先我想明白，如果我可以在沒有完全切換到這個指令的情況下工作。如果有任何解決方法。因爲我通過ng-click動作動態地設置了一些數據 – Acewin

問題是如果我將這些div中的數據移動到腳本中，我將如何修改這些數據。在div中加載的很多數據都是通過jstl。 – Acewin

。使用ng-template我生成了div並通過angularjs uibModal open call加載它。寫了一個單獨的控制器dialogController，它將處理我的Modal div使用的所有操作和範圍變量和操作。

下面是我用來從模板緩存中打開div的javascript調用。

var modalInstance = $uibModal.open({ 
           templateUrl: 'error-dialog', 
           controller: 'dialogController', 
           scope: $scope, 
           resolve: {     
            msg: function(){ 
            return 'ErrorMessage for DIsplay'; 
           } 
          } 
        });

的JavaScript內的div元素看起來如下

<script type="text/ng-template" id="error-dialog"> 
      <div class="modal-body alert-danger"> 
       <button type="button" class="btn btn-default pull-right" data-dismiss="modal" ng-click="close()">&#10539;</button> 
       <pre class="alert-danger" style="border:0px;">{{msg}}</pre> 
      </div> 
</script>

最後控制器

.controller('dialogController', [ '$scope','msg','$uibModalInstance' ,function($scope, msg,$uibModalInstance) { 
    $scope.msg = msg; 
    $scope.close = function() { 
     $uibModalInstance.dismiss('cancel'); 
     }; 
} ])

來源

2017-03-23 21:18:29 Acewin

更改jquery + bootstrap模態對話框div到BootStrap + angularjs

回答

相關問題