如何用Angular JS打開Bootstrap模式？

我認爲我真正需要知道的是如何對文檔代碼進行更改，以使我可以實現自己的模式。它不會讓我簡單地添加一個如何用Angular JS打開Bootstrap模式？

$scope.myTitle = "Title Here";

然後將其放置在HTML，它需要經過modalInstance東西？

我現在認識到，沒有打開使用角度JS自舉模式的一種特定的方式，而不是我怎麼一直試圖使用jQuery來做到這一點，但我無法弄清楚如何落實到我的代碼呢？

我已經試過

$scope.modalTitle = modalInfoTitle; 
$scope.modalLinks = modalInfoLinks; 

$scope.open = function (size) { 

    var modalInstance = $modal.open({ 
     size: size, 
    }); 

    urlExtract = location.hash 
    foundExtract = urlExtract.split("#")[1]; 
     if(foundExtract == "s"){ 
      $scope.open('lg') 
     } 
}

我得到的出現在網頁的頂部，好像一個模態試圖打開粗線。可能是因爲它不知道要打開什麼。我從https://angular-ui.github.io/bootstrap/得到這段代碼，我不明白是什麼打開模式，就像指向特定模式的地方一樣。我嘗試添加在

templateUrl：「myModalContent.html」，

和包裝所示的腳本標記的HTML模式，但這並不做任何事情。是否需要有myModalContent.html？我沒有看到這個文件存在於Plunker的文檔中。我錯過了什麼？

下面是我試圖這樣做的舊方法。但是它包含了我的代碼在這些新變化之前的基礎。

我在這個崗位Invoking modal window in AngularJS Bootstrap UI using JavaScript

的一些CSS需要添加，這點我已經試過沒有變化增加，以及閱讀。

所以我使用了Angular來填充Bootstrap模式之前沒有任何問題。但是我認爲這次我的具體情況可能會導致問題？

當我在URL後加載#s的頁面時，模態確實出現，但Angular沒有填充，因爲它顯示了插值。另外，我得到這個錯誤：

Error: p is undefined

後面跟着通常的CDN對angular.min.js的引用blob。我甚至不知道p是從哪裏來的。

下面是導致此代碼：

if(typeof modalInfoTitle !== 'undefined'){ 
    $scope.modalTitle = modalInfoTitle; 
    $scope.modalLinks = modalInfoLinks; 

    urlExtract = location.hash 
    foundExtract = urlExtract.split("#")[1]; 
    if(foundExtract == "s"){ 
     $('#waiverModal').modal('show'); 
    } 
}

modalInfoTitle和modalInfoLinks位於一個單獨的JS文件，該文件是嚴格的JS。這個文件提供了我的一堆其他變量，所以我知道這不是問題。另外，我可以在任何地方使用alert($scope.modalTitle);，並提醒正確的文字。

在其他的JS文件：

var modalInfoTitle = "Modal Title"; 
var modalInfoLinks = [ 
[ 
    {title:"Name1",link:"file1.pdf"}, 
    {title:"Name3",link:"file3.pdf"}, 
],[ 
    {title:"Name2",link:"file2.pdf"}, 
    {title:"Name4",link:"file4.pdf"}, 
]];

模態本身在HTML文件中：

<div class="modal fade buildingsModal" id="waiverModal" role="dialog"> 
<div class="modal-dialog modal-lg"> 
    <div class="modal-content"> 
    <div class="modal-header"> 
    <button type="button" class="close" data-dismiss="modal">&times;</button> 
    <h4 class="modal-title">{{modalTitle}}</h4> 
    </div> 
    <div class="modal-body"> 
    <table id="tableInModal"> 
    <tr ng-repeat="row in modalLinks"> 
    <td ng-repeat="z in row"><a href="{{z.link}}">{{z.title}}</a></td> 
    </tr></table> 
    </div> 
    <div class="modal-footer clear"> 
    </div> 
</div> 
</div> 
</div>

因此，這裏是不同的東西。我之前展示的錯誤是我使用Firefox獲得的錯誤。然而，這裏是我的Chrome得到錯誤：

TypeError: Cannot read property 'childNodes' of undefined

at g (angular.min.js:47) 
at g (angular.min.js:47) 
at g (angular.min.js:47) 
at g (angular.min.js:47) 
at g (angular.min.js:47) 
at g (angular.min.js:47) 
at J (angular.min.js:54) 
at g (angular.min.js:47) 
at g (angular.min.js:47) 
at g (angular.min.js:47)

來源

2015-08-28 Christine268

你能否顯示包含產生錯誤的錨元素的示例URL？另外，你是否意識到你在做任務，而不是在這裏比較'if（foundExtract =「s」）'？您可能希望在這裏比較==或'==='比較。 –

'www.url.com/discipline.html＃s' - 類似的東西？我始終在URL中使用哈希，甚至在代碼中的其他地方使用哈希。但是，如果沒有發佈新的代碼塊，#s不會破壞代碼。 – Christine268

$scope.modalTitle = modalInfoTitle; $scope.modalLinks = modalInfoLinks; urlExtract = location.hash; foundExtract = urlExtract.split("#")[1]; if(foundExtract == "s"){ $(document).ready(function(){ $('#waiverModal').modal('show'); }); }

如何用Angular JS打開Bootstrap模式？

回答

相關問題