如何使用.innerHTML插入包含AngularJS的Bootstrap模式，然后手动打开它？

When my page loads this is what I am trying to get it to do:

当我的页面加载时,这是我试图让它做的事情:

$(function () {
    urlExtract = location.hash
    foundExtract = urlExtract.split("#/")[1];
    if(foundExtract == "zsexdr"){
        var createModal = "";

        basicRep = document.getElementById('basicReports');

        createModal+='<div class="modal fade" id="#waiverModal" role="dialog">';
        createModal+='<div class="modal-dialog modal-sm">';
        createModal+='<div class="modal-content">';
        createModal+='<div class="modal-header">';
        createModal+='<button type="button" class="close" data-dismiss="modal">&times;</button>';
        createModal+='<h4 class="modal-title">{{z.name}} - Downloads</h4>';
        createModal+='</div>';
        createModal+='<div class="modal-body">';
        createModal+='<span ng-repeat="z in waiverModalLinks" class="{{z.id}}"><a href="{{z.link}}{{z.title}}">{{z.title}}</a></span>';
        createModal+='</div>';
        createModal+='<div class="modal-footer">';
        createModal+='</div>';
        createModal+='</div>';
        createModal+='</div>';
        createModal+='</div>';

        basicRep.innerHTML+=createModal;

        $('#waiverModal').modal('show');
    }
})

The modal gets created and inserted into the HTML just fine, except that the AngularJS isn't registering, where it does register for other angular within the same div id="basicReports"> I am using ui.bootstrap and I have gotten AngularJS to be inserted into a modal on a different page, but this is the first time I am attempting to insert the modal dynamically and have it opened programmatically. So I am not sure if I am doing it correctly.

模态被创建并插入到HTML中就好了,除了AngularJS没有注册,它在同一个div中注册其他角度id =“basicReports”>我正在使用ui.bootstrap并且我已经获得了AngularJS插入到不同页面上的模态,但这是我第一次动态插入模态并以编程方式打开它。所以我不确定我是否正确地做到了。

My main problem is, along with the Angular not registering, the modal is not opening. I know the modal is there because if I inspect element I can see it in the HTML

我的主要问题是,随着Angular没有注册,模态不会打开。我知道模态是存在的,因为如果我检查元素,我可以在HTML中看到它

2 个解决方案

#1

You have to use $compile for angular to parse the html.

你必须使用$ compile for angular来解析html。

The modal is not opening because in the html you have specified the modal id as #waiverModal instead of just waiverModal. Also since you already have jQuery on the page you can use jQuery methods for DOM manipulation.

模态没有打开,因为在html中你已经将模态id指定为#waiverModal而不仅仅是waiverModal。此外,由于您已经在页面上使用了jQuery,因此可以使用jQuery方法进行DOM操作。

(function(){
var app = angular.module('AVS', ['ui.bootstrap']);

app.controller('BasicInformation', function($scope, $compile){

   $scope.basicreports = [
   {name: 'Online Edit', link: 'url', status:''},
   {name: 'Project Log', link: 'url', status:''}

   ];

   $scope.waiverModalLinks =[{
      title:"Title",
      link:"Links",
      color:"color?"
   }];


    var urlExtract = location.hash,
    foundExtract = urlExtract.split("#/")[1];
    if(foundExtract == "zsexdr"){
        var createModal = "", 
        basicRep = $('#basicReports');

        createModal+='<div class="modal fade" id="waiverModal" role="dialog">';
        createModal+='<div class="modal-dialog modal-sm">';
        createModal+='<div class="modal-content">';
        createModal+='<div class="modal-header">';
        createModal+='<button type="button" class="close" data-dismiss="modal">&times;</button>';
        createModal+='<h4 class="modal-title">{{z.name}} - Downloads</h4>';
        createModal+='</div>';
        createModal+='<div class="modal-body">';
        createModal+='<span ng-repeat="z in waiverModalLinks" class="{{z.id}}"><a href="{{z.link}}{{z.title}}">{{z.title}}</a></span>';
        createModal+='</div>';
        createModal+='<div class="modal-footer">';
        createModal+='</div>';
        createModal+='</div>';
        createModal+='</div>';
        createModal+='</div>';


        createModal = $compile(createModal)($scope);


        basicRep.append(createModal);

        $('#waiverModal').modal('show');
    }

 });

})();

#2

If you're interested in going a bit more full-bore into the "AngularJS Way" of doing things, you should check out Bootstrap UI, which is Twitter Bootstrap written in pure angular, without any dependency on jQuery.

如果你有兴趣进一步完成“AngularJS Way”的做法,你应该看看Bootstrap UI,它是用纯角度编写的Twitter Bootstrap,不依赖于jQuery。

I think this would provide you with a much cleaner, simpler, and more maintainable way to create this modal because of the tight integration between your Angular controller, directive, and modal template.

我认为,由于Angular控制器,指令和模态模板之间的紧密集成,这将为您提供更清晰,更简单,更易于维护的方式来创建此模态。

Here's the link directly to the Bootstrap UI Modal demo and sample code:
https://angular-ui.github.io/bootstrap/#/modal

这是直接链接到Bootstrap UI Modal演示和示例代码的链接:https://angular-ui.github.io/bootstrap/#/modal

If you're interested in going down this path, I'll add and edit to this answer to take a shot at doing the same thing you're doing above as a Bootstrap UI modal. It'll get rid of all of those HTML strings and replace them with nice clean data binding.

如果你有兴趣沿着这条路走下去,我会添加并编辑这个答案,以便像上面的Bootstrap UI模式那样做你正在做的事情。它将摆脱所有这些HTML字符串,并用干净的数据绑定替换它们。

EDIT Here's a more "Angular Way" of dynamically building the modal:

编辑这是动态构建模态的更“角度方式”:

JS:

angular.module('dynamicModalExample', ['ngRoute', 'ui.bootstrap'])

 .controller('MainController', function($scope, $location, $modal) {

     $scope.data = {
         name: 'sampleName',
         waivers: {
             id: 'sampleId',
             link: 'sampleLink',
             title: 'sampletitle'
         }
     }

     $scope.urlExtract = $location.path()
     $scope.foundExtract = $scope.urlExtract.split("#/")[1];

     if(foundExtract == "zsexdr"){
        $scope.showModalBtn = true;
     }else{
        $scope.showModalBtn = false;
     }

     // Might want to use a ternary operator instead of if/else like this:
     // $scope.showModalBtn = foundExtract == "zsexdr" ? true : false;

     $scope.open = function () {
          $modal.open({
          animation: true,
          templateUrl: 'myModalContent.html',
          controller: 'ModalInstanceCtrl',
          resolve: {
              items: function () {
              return $scope.data;
              }
          }
        }
     });
 })

 .controller('ModalInstanceCtrl', function ($scope, $modalInstance, data) {

     $scope.waiverModalLinks = data.waivers;
     $scope.name = data.name;

     $scope.ok = function () {
       $modalInstance.close();
     };
 });

HTML:

<div ng-controller="MainController">
    <button ng-if="showModalBtn" ng-click="open()">
        Show Downloads Modal
    </button>
    <script type="text/ng-template" id="myModalContent.html">
        <div class="modal-header">
            <h4 class="modal-title">{{name}} - Downloads</h4>'
        </div>
        <div class="modal-body">
            <span ng-repeat="z in waivers" class="{{z.id}}">
                <a href="{{z.link}}{{z.title}}">{{z.title}}</a>
            </span>
        </div>
        <div class="modal-footer">
            <button class="btn btn-primary" ng-click="ok()">OK</button>
        </div>
    </script>
</div>

#1