Javascript 如何在制作弹出窗口时加载html？

我制作了一个弹出窗口。但是我在同一个html文件中插入了我的弹出窗口内容。我想从另一个文件加载弹出窗口内容，并使用templateURl加载内容：我们可以这样做吗

这是我的演示

HTML:

安古拉斯普朗克












ddd

JS:

var-app=angular.module（'plunker'，[]）；
应用程序控制器（'MainCtrl'，函数（$scope）{
$scope.name='World'；
});
app.directive（'mypopover'，function（$compile，$templateCache）{
log（$templateCache.get（“a.html”）；
var getTemplate=函数（contentType）{
var模板=“”；
开关（contentType）{
案例“用户”：
template=$templateCache.get（“templateId.html”）；
打破
}
返回模板；
}
返回{
限制：“A”，
链接：函数（范围、元素、属性）{
log（$templateCache.get（“a.html”）；
var含量过高；
popOverContent=getTemplate（“用户”）；
//popOverContent=$templateCache.get（“a.html”）
popOverContent=$compile（“+popOverContent+”）（范围）；
控制台日志（popOverContent）；
console.log（范围）
变量选项={
内容：popOverContent，
位置：“对”，
是的，
日期：scope.date
};
$（元素）.popover（选项）；
}
};
});

我只想从另一个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>

嗨，这是您的密码

我使用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);


     }
     };
});

---

让我知道它是否对您有帮助，预览是

实际上我将popover内容复制到了一个HTMl文件中。然后我想使用templeteURL获取抗衡，抗衡？我们可以使用这个逻辑吗？Hi，您可以在getTemplate（url）中执行ajax调用吗？我使用的是$.ajax（），您还可以使用角度回发调用吗？然后可以将返回的html内容注入该id。$（“#popid”）.html（data）@WickStargazer你能为此做些什么吗？这个问题有什么进展吗？谢谢，我正在寻找答案。我会在5分钟后告诉你

 <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>

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);


     }
     };
});