AngularJS Modal not showing up when templateUrl changes -
So far, I have an example UI example:
Controller: < Pre> And this section, which is just sitting in .html for the whole page, this modal is on. HTML: It just works fine. But I'm trying to reactivate some things and organize my code, so I want to move the model html to my own file. When I do this, try to use it by changing the template URL into the path: I have tried to change the CSS for the paradigm, in which there is no difference. My question is, why is this work okay if the script tag is in the main html, but not at all, if it's in its own file? Here it shows what I mean. If you copy into template.html and place it above the button in the index.html file, then it works ... worked fine with other clicks on your plnkr button. This model will show in the expected format, the reason shown with the second click is that angular will load the 'unconnected' template for the first time, then he compiled the template in the raw HTML which is ready for your subsequent clicks. EDIT: In addition, when you enter the correct template code in the index.html, Keiril compiles the template during its initial passage through DOM; That is why the model seemed to work. var ModalDemoCtrl = function ($ scope, $ modal) {$ scope.open = function () {var modalInstance = $ modal.open ({templateUrl: 'myModalContent.html', Controller: ModalInstanceCtrl}); }; }; Var ModalInstance Ctrl = Function ($ scope, $ Modal Instance) {$ scope.close = function} {$ modalInstance.dississ ('Cancel'); }; };
& lt; Script type = "text / ng-template" id = "myModalContent.html" & gt; & Lt; Div class = "modal-header" & gt; & Lt; H3 class = "modal-title" & gt; I'm a model! & Lt; / H3 & gt; & Lt; Button class = "btn btn-warning" ng-click = "off ()" & gt; X & lt; / Button & gt; & Lt; / Div & gt; & Lt; Div class = "modal-body" & gt; Stuff & lt; / Div & gt; & Lt; / Script & gt;
\ tmpl \ myModalContent.html , this does not appear, the background still appears and inspects the page That is it is properly filled, but it is not visible right now.
Comments
Post a Comment