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

时间：2015-06-02 18:47:40

标签： jquery angularjs twitter-bootstrap

当我的页面加载时，这就是我想要它做的事情：

$(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');
    }
})

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

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

2 个答案:

答案 0 :(得分：1)

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

模态未打开，因为在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');
    }

 });

})();

答案 1 :(得分：1)

如果您有兴趣进一步了解＆＃34; AngularJS Way＆＃34;做事，你应该看看Bootstrap UI，这是用纯角度编写的Twitter Bootstrap，不依赖于jQuery。

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

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

如果您有兴趣沿着这条路走下去，我会添加并编辑这个答案，以便做一些与您在上面做的Bootstrap UI模式相同的事情。它将删除所有这些HTML字符串，并用漂亮的干净数据绑定替换它们。

修改 这是一个更多的＆＃34; Angular Way＆＃34;动态构建模态：

JS：

class OneNoteMultiPartRequest {
    protected $boundary;
    protected $parts = array();
    protected $responseInfo = null;
    protected $errorMessage = null;

    function __construct($presentationPartHtml) {
        $this->boundary = uniqid('', true);
        $this->appendPart("Presentation", "text/html", $presentationPartHtml);
    }

    public function appendPart($partName, $partContentType, $partContent) {
        $this->parts[] = "--{$this->boundary}\r\nContent-Disposition: form-data; name=\"$partName\"\r\nContent-Type: $partContentType\r\n\r\n$partContent\r\n\r\n";
    }

    public function send($url, $accessToken) {
        $cUrl = curl_init();
        curl_setopt($cUrl, CURLOPT_URL, $url);
        curl_setopt($cUrl, CURLOPT_RETURNTRANSFER, true);
        curl_setopt($cUrl, CURLOPT_HEADER, false);
        curl_setopt($cUrl, CURLOPT_SSL_VERIFYHOST, 2);
        curl_setopt($cUrl, CURLOPT_SSL_VERIFYPEER, true);
        curl_setopt($cUrl, CURLOPT_VERBOSE, true);
        curl_setopt($cUrl, CURLOPT_POST, true);
        curl_setopt(
            $cUrl,
            CURLOPT_HTTPHEADER,
            array(
                "Content-Type: multipart/form-data; boundary={$this->boundary}",
                "Authorization: Bearer $accessToken"
            )
        );

        $postData = implode($this->parts) . "--{$this->boundary}--";

        curl_setopt($cUrl, CURLOPT_POSTFIELDS, $postData);        
        $response = curl_exec($cUrl);
        $this->responseInfo = curl_getinfo($cUrl);
        $this->errorMessage = curl_error($cUrl);
        curl_close($cUrl);

        return $response;
    }

    public function getResponseInfo() {
        return $this->responseInfo;
    }

    public function getErrorMessage() {
        return $this->errorMessage;
    }
}

$presentationPartHtml = <<<PRESENTATIONHTML
<!DOCTYPE html>
<html>
    <head>
    <title>Title of the captured OneNote page</title>
    <meta name="created" content="2013-06-11T12:45:00.000-8:00"/>
    </head>
    <body>
        <p>This is a simple multi-part HTML page.</p>
        <img src="name:image1"/><br/>
        <img src="name:image2"/><br/>
        <object data-attachment="Logo.png" data="name:image3" type="image/png"/>
    </body>
</html>
PRESENTATIONHTML;

$imageData = "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";

$oneNoteMultiPartRequest = new OneNoteMultiPartRequest($presentationPartHtml);
$oneNoteMultiPartRequest->appendPart("image1", "image/png", base64_decode($imageData));
$oneNoteMultiPartRequest->appendPart("image2", "image/png", base64_decode($imageData));
$oneNoteMultiPartRequest->appendPart("image3", "image/png", base64_decode($imageData));
$response = $oneNoteMultiPartRequest->send("https://www.onenote.com/api/v1.0/pages", "<YOUR ACCESS TOKEN>");

var_dump($response);
echo '<br/><br/>';

$info = $oneNoteMultiPartRequest->getResponseInfo();
var_dump($info);
echo '<br/><br/>';

$errorMessage = $oneNoteMultiPartRequest->getErrorMessage();
var_dump($errorMessage);

HTML：

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();
     };
 });
相关问题
最新问题