Question

我弹出一个。但是我在同一个html文件中插入我的pop内容。我想从另一个文件加载popover竞争并使用templateURl加载竞争：我们可以这样做吗？

这是我的演示

HTML：

<!DOCTYPE html>
<html ng-app="plunker">

<head>
    <meta charset="utf-8"/>
    <title>AngularJS Plunker</title>
    <link href="bootstrap.min.css" rel="stylesheet"/>
    <script src="js/jquery-1.11.0.min.js"></script>
    <script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <link href="css/style.css" rel="stylesheet"/>
    <script src="js/angular.js"></script>

    <script src="js/bootstrap.min.js"></script>
    <script src="js/ui-bootstrap-tpls-0.10.0.js"></script>
    <script src="js/angulartest.js"></script>

    <meta charset="utf-8" />


<body>



<div ng-controller="MainCtrl">
<script type="text/ng-template" id="templateId.html">
    <div  id="Mainnavpanel" data-theme="b"  class="custom-popup">
        <ul >
            <li><a href="#"  class="btn edit_h"><i class="edit1 space1"></i>Edit</a></li>
            <li><a href="#" class="btn deleteTestCase_h" ><i class="delete1 space1"></i>Delete</a>
            </li>
            <li><a href="#" class="btn copy_h" ><i class="copy1 space1"></i>Copy</a></li>
        </ul>
    </div>
</script>
    <br>
    <br>
    <br>
<button>ddd</button>
<a href="#" mypopover  >Click here</a>
</div>


</body>

</html>

JS：

var app = angular.module('plunker', []);


app.controller('MainCtrl', function($scope) {
    $scope.name = 'World';
});

app.directive('mypopover', function ($compile,$templateCache) {

    console.log($templateCache.get("a.html"));
    var getTemplate = function (contentType) {

        var template = '';

        switch (contentType) {
            case 'user':
                template = $templateCache.get("templateId.html");


                break;
        }
        return template;
    }
    return {
        restrict: "A",

        link: function (scope, element, attrs) {
            console.log($templateCache.get("a.html"));
            var popOverContent;

            popOverContent = getTemplate("user");
           // popOverContent=$templateCache.get("a.html")
            popOverContent = $compile("<div>" + popOverContent+"</div>")(scope);
            console.log(popOverContent);
            console.log(scope)

            var options = {

                content: popOverContent,
                placement: "right",
                html: true,
                date: scope.date
            };
            $(element).popover(options);
        }
    };
});

我只是想从另一个html文件加载这个竞争：

 <div  id="Mainnavpanel" data-theme="b"  class="custom-popup">
            <ul >
                <li><a href="#"  class="btn edit_h"><i class="edit1 space1"></i>Edit</a></li>
                <li><a href="#" class="btn deleteTestCase_h" ><i class="delete1 space1"></i>Delete</a>
                </li>
                <li><a href="#" class="btn copy_h" ><i class="copy1 space1"></i>Copy</a></li>
            </ul>
        </div>

Answer 1

您好，这是您的插件代码

我用ajax获取html的内容，然后显示弹出窗口。有很多方法可以编写它，这与jquery和异步调用相结合......完成工作

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
});

app.directive('mypopover', function ($compile,$templateCache) {
    var getTemplate = function (contentType,scope,element) {

        var template = $templateCache.get("templateId.html");

        $.ajax({
                type: "GET",
                url: 'test.html',
                type: 'get',
                dataType: 'html',
                success: function (data) {
                   var options = {
                   content: $(template).html(data),
                   placement: "right",
                   html: true,
                   date: scope.date
                   };
                  $(element).popover(options);
                },
                  error: function (data) {


                  }
            });

        return template;
    }
   return {
     restrict: "A",

    link: function (scope, element, attrs) {
     console.log('entering link')
     var popOverContent;
     popOverContent = getTemplate("user",scope,element);


     }
     };
});

如果有帮助，请告诉我，预览为here

如何在弹出时加载html？

1 个答案: