Html 文件作为 AngularJS 指令中 Bootstrap 弹出窗口中的内容

Posted

技术标签:

【中文标题】Html 文件作为 AngularJS 指令中 Bootstrap 弹出窗口中的内容【英文标题】:Html file as content in Bootstrap popover in AngularJS directive 【发布时间】:2014-02-17 05:17:19 【问题描述】:

我有一个 Angular 指令来处理 Bootstrap 弹出框,如下面的代码所示。在我的指令中,我将弹出框内容设置为 html 字符串,我认为这很难看。 我想做的是使用“template.html”文件而不是 HTMLstring。通过这种方式,我将能够对不同的模板文件使用相同的指令,具体取决于我想要显示的弹出框类型。反正这是我的计划。

那么,如何以最佳方式从我的 template.html 加载 html 代码并使用它而不是下面 AngularJs 指令中的 HTMLstring?

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

var HTMLstring = "<div><label class='control-label' style='color: rgb(153, 153,153)'>Search</label>&nbsp;&nbsp;"+"<input placeholder='Search assignment' ng-model='searchText' type='text' class='form-control'> <br>"+"<label class='control-label' style='color: rgb(153, 153, 153)'>Select an assignable</label>"+"<p ng-repeat='p in projects | filter:searchText'ng-click='createEvent(user.id,date)'>"+"p.title</p></div>";

var getTemplate = function (contentType) 
    var template = '';
    switch (contentType) 
        case 'user':
            template = HTMLstring;
            break;
    
    return template;

return 
    restrict: "A",
    link: function (scope, element, attrs) 
        var popOverContent;
        if (scope.user) 
            var html = getTemplate("user");
            popOverContent = $compile(html)(scope);                    
        
        var options = 
            content: popOverContent,
            placement: "right",
            html: true,
            date: scope.date
        ;
        $(element).popover(options);
    ,
    scope: 
        user: '=',
        date: '='
    
;
);

【问题讨论】:

【参考方案1】:

一个快速的解决方案是使用带有内联模板的 templateCache:

内联模板:

<script type="text/ng-template" id="templateId.html">
      This is the content of the template
</script>

Js:

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

    var getTemplate = function (contentType) 
        var template = '';
        switch (contentType) 
            case 'user':
                template = $templateCache.get("templateId.html");
                break;
        
        return template;
    

DEMO

如果需要加载外部模板,需要使用ajax $http手动加载模板并放入缓存。然后你可以使用$templateCache.get稍后检索。

$templateCache.put('templateId.html', YouContentLoadedUsingHttp);

示例代码:

var getTemplate = function(contentType) 
    var def = $q.defer();

    var template = '';
    switch (contentType) 
      case 'user':
        template = $templateCache.get("templateId.html");
        if (typeof template === "undefined") 
          $http.get("templateId.html")
            .success(function(data) 
              $templateCache.put("templateId.html", data);
              def.resolve(data);
            );
         else 
           def.resolve(template);
        
        break;
    
    return def.promise;
  

DEMO

【讨论】:

这很完美,但是可以在模板中使用 angularjs 表达式吗?我的意思是这样的: @joselo:是的。在这种情况下,我们必须编译它popOverContent = $compile("&lt;div&gt;" + popOverContent+"&lt;/div&gt;")(scope);。见演示plnkr.co/edit/CoDdWWQz8jPPM4q1mhC5?p=preview 上述情况,假设popover的内容是固定的(template.html)。如果我想为不同的弹出框使用不同的内容怎么办?类似于从 html 传递的属性以显示不同的模板。 a href pop-over items="items" title="someTitle" template="location/of/anotherTemplate.html" &gt;Show Another Pop over&lt;/a&gt; 在这种情况下,$templateCache 不会存储第二个模板。通过 $http 加载无助于异步。 @Aniket Sinha:您可以使用 $http 或使用内联模板加载 location/of/anotherTemplate.html。然后处理&lt;a&gt;的点击事件,显示弹窗。 @Aniket Sinha:查看我的更新答案。希望对您有所帮助。【参考方案2】:

为了完成 Khahn 的回答,如果你加载一个动态模板,最后一部分应该是这样的:

return 
restrict: "A",
scope: 
    item: "=" // what needs to be passed to the template
,
link: function(scope, element, attrs) 

  getTemplate("user").then(function(popOverContent) 

    var options = 
      content: $compile($(popOverContent))(scope),
      placement: "bottom",
      html: true,
      trigger: "hover"
    ;
    $(element).popover(options);

  );

;

【讨论】:

以上是关于Html 文件作为 AngularJS 指令中 Bootstrap 弹出窗口中的内容的主要内容,如果未能解决你的问题,请参考以下文章

AngularJS学习之指令命名规则详解

AngularJS指令的详解

深入理解AngularJS中的ng-bind-html指令和$sce服务

AngularJs学习笔记——ng-include

AngularJS - 无法在链接函数中动态更改指令模板

AngularJS 简介指令表达式