HTML文件作为AngularJS指令的引导酥料饼的内容 [英] Html file as content in Bootstrap popover in AngularJS directive

问题描述

我有一个角指令来处理引导popovers如下面的code。在我的指导我设置酥料饼的内容到HTML字符串，我认为这是丑陋的。
我想要做的就是用一个template.html文件，而不是HTMLstring。这样一来，我将能够使用具有取决于哪种类型的酥料饼的，我想展现不同的模板文件相同的指令。这是我的计划呢。

那么，如何从我的template.html的最佳方式负载HTML code做我并在下面的AngularJs指令，用它代替HTMLstring的？

  app.directive（'mypopover'，函数（$编译）{VAR HTMLstring =＆LT; D​​IV＆GT;＆LT;标签类='控制标签风格=颜色：RGB（153，153153）'＆GT;搜索＆LT; /标签＆gt;＆安培; NBSP;＆安培; NBSP;+＆LT;输入占位符='搜索任务'NG-模式='SEARCHTEXT类型=文本类='的形式控制'＆GT;＆LT; BR＆gt;中+＆LT;标签类='控制标签风格=颜色： RGB（153，153，153），'＆GT;选择一个分配和LT; /标签＆gt;+＆LT; p NG重复='在项目p |过滤器：searchText'ng点击='createEvent（user.id，日期） '＆GT;+{{p.title}}＆LT; / p＆GT;＆LT; / DIV＆gt;中;VAR getTemplate =功能（的contentType）{
    VAR模板='';
    开关（的contentType）{
        情况下用户：
            模板= HTMLstring;
            打破;
    }
    返回模板;
}
返回{
    限制：A，
    链接：功能（范围，元素，ATTRS）{
        VAR popOverContent;
        如果（scope.user）{
            VAR HTML = getTemplate（用户）;
            popOverContent = $编译（HTML）（范围）;
        }
        VAR的选择= {
            内容：popOverContent，
            位置：右，
            HTML：真实，
            日期：scope.date
        };
        $（元素）.popover（选件）;
    }，
    范围： {
        用户：'='，
        日期：'='
    }
};
}）;
 

解决方案

一个快速的解决方案是使用templateCache与联模板：

联模板：

 ＆LT;脚本类型=文/ NG-模板ID =templateId.html＆GT;
      这是在模板的内容
＆LT; / SCRIPT＆GT;
 

记者：

  app.directive（'mypopover'，函数（$编译，$ templateCache）{    VAR getTemplate =功能（的contentType）{
        VAR模板='';
        开关（的contentType）{
            情况下用户：
                模板= $ templateCache.get（templateId.html）;
                打破;
        }
        返回模板;
    }
 

演示

如果您需要加载外部模板，你需要使用AJAX $ HTTP手动加载模板，放入缓存。然后你可以使用 $ templateCache.get 后取回。

  $ templateCache.put（'templateId.html'，YouContentLoadedUsingHttp）;
 

样code：

  VAR getTemplate =功能（的contentType）{
    变种高清= $ q.defer（）;    VAR模板='';
    开关（的contentType）{
      情况下用户：
        模板= $ templateCache.get（templateId.html）;
        如果（typeof运算模板===未定义）{
          $ http.get（templateId.html）
            .success（功能（数据）{
              $ templateCache.put（templateId.html数据）;
              def.resolve（数据）;
            }）;
        }其他{
           def.resolve（模板）;
        }
        打破;
    }
    返回def.promise;
  }
 

演示

I have an Angular directive to handle Bootstrap popovers as shown in the code below. In my directive I'm setting the popover content to a HTML string, which I think is ugly. What I wanna do is to use an "template.html" file instead of HTMLstring. In that way I will be able to use the same directive with different template files depending on which type of popover I wanna show. That's my plan anyway.

So, how do I in the best way load html code from my template.html and use it instead of the HTMLstring in the AngularJs directive below?

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: '='
    }
};
});

解决方案

A quick solution is using templateCache with inline template:

Inline template:

<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

If you need to load external templates, you need to use ajax $http to load the templates manually and put in the cache. Then you can use $templateCache.get to retrieve later.

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

Sample code:

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

这篇关于HTML文件作为AngularJS指令的引导酥料饼的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！