AngularJS莫代爾沒有顯示出來時templateUrl改變

到目前爲止，我有什麼是直客角UI例如：AngularJS莫代爾沒有顯示出來時templateUrl改變

控制器：

var ModalDemoCtrl = function ($scope, $modal) { 

    $scope.open = function() { 

    var modalInstance = $modal.open({ 
     templateUrl: 'myModalContent.html', 
     controller: ModalInstanceCtrl 
    }); 
    }; 
}; 


var ModalInstanceCtrl = function ($scope, $modalInstance) { 

    $scope.close = function() { 
    $modalInstance.dismiss('cancel'); 
    }; 
};

這部分，這只是在坐着。這個模式的整個頁面的HTML。 Html：

<script type="text/ng-template" id="myModalContent.html"> 
    <div class="modal-header"> 
    <h3 class="modal-title">I'm a modal!</h3> 
    <button class="btn btn-warning" ng-click="close()">X</button> 
    </div> 
    <div class="modal-body"> 
    Stuff 
    </div> 
</script>

這工作得很好。但我試圖重構一些東西並組織我的代碼，所以我想將模態html移到它自己的文件中。當我這樣做，並嘗試通過將templateUrl更改爲路徑來使用它：\tmpl\myModalContent.html，它不顯示。背景仍然出現，檢查頁面顯示它正確加載，但不會顯示。

我試着改變模式的CSS每個這些suggestions沒有區別。

我的問題是，爲什麼這個工作正常，如果腳本標記是在主html中，但根本沒有，如果它在它自己的文件？

這是一個plnkr顯示我的意思。如果您複製template.html中的內容並將它放置在index.html文件中的按鈕的正上方，它將起作用...

來源

2014-07-24 Bobo

好吧，我顯然是一個假人。我所要做的只是將我的新文件包含在主視圖中。

<div ng-include="'path-to-file.html'"></div>

然後從控制器調用它很容易，我只需要id（modalContent.html）作爲templateUrl。

只要保持游泳，你最終會到達那裏:)

來源

2014-07-28 15:45:54 Bobo

這應該是自動的。 –

刪除template.html的模板聲明，並將原始HTML放在該處，如下所示：

<!--script type="text/ng-template" id="template.html"--> 
      <div class="modal-body"> 
       Hello 
      </div> 
      <div class="modal-footer"> 
       <button class="btn btn-primary" ng-click="cancel()">OK</button> 
      </div> 
<!--/script-->

您的plnkr工作正常，再次點擊按鈕。它會按預期顯示模態。第二次點擊顯示的原因是Angular會第一次加載「未編譯」模板，然後將模板編譯爲原始HTML，以便隨後進行點擊。另外，當您將模板代碼放在index.html中時，Angular會在其初始傳遞DOM時編譯模板;這就是爲什麼模式似乎工作。

來源

2014-07-24 22:58:24 javaCity

那麼這部作品在plunker，但不是在我的代碼... – Bobo

我認爲這可能與我的角度和引導版本做等等。現在檢查 – Bobo

http://plnkr.co/edit/p9qsqgMVOvT4yDmI7C0j?p=preview我已經包含了與我的項目中的所有內容相同的版本，並且plnkr仍然有效。它在$ modal.open部分中遇到了斷點，但從來沒有進入ModalInstantCtrl – Bobo

AngularJS莫代爾沒有顯示出來時templateUrl改變

回答

相關問題