javascript - 如何将 html 放入 javascript 变量中

Question

目前我有这种肮脏的编码函数返回 HTML 的方式。

有没有更好的方法可以做到这一点。

我很难在其中插入变量，而且它看起来很脏

function getTemplate (model, id) {
    model = "Test";
    id = 5;
    return '<div>' +
           '<button class="btn btn-xs btn-info" title="View"' +
           'ng-click="openTab(panes[1], "' + model + '", "' + id + '")">' +
           '<span class="glyphicon glyphicon-cog"></span>' +
           '</button>' +
           '<button class="btn btn-xs btn-info" title="Edit"' +
           'ng-click="editModal(model, id)">' +
           '<em class="fa fa-pencil"></em>' +
           '</button>' +
           '<button class="btn btn-xs btn-danger" title="Delete"' +
           'ng-click="deleteEntry(id, model)">' +
           '<em class="fa fa-trash"></em>' +
           '</button>' +
           '</div>';
 }

编辑:

我正在使用 Angular UI 网格。我正在列内渲染这些按钮。需要 Html 中的 cellTemplate

Answer 1

I am having hard time in inserting variables inside it and it looks very dirty

使用 $templateRequest，您可以通过 URL 加载模板，而无需将其嵌入字符串中。如果模板已加载，将从缓存中获取。

app.controller('MainCtrl', function($scope, $templateRequest, $sce, $compile){
    $scope.name = 'World';
    $scope.getTemplate = function (model, id) {

      // Make sure that no bad URLs are fetched. If you have a static string like in this
      // example, you might as well omit the $sce call.
      var templateUrl = $sce.getTrustedResourceUrl('nameOfTemplate.html');

      $templateRequest(templateUrl).then(function(template) {
          // template is the HTML template as a string
          $scope.model = "Test";
          $scope.id = 5;
          // Let's put it into an HTML element and parse any directives and expressions
          // in the code. (Note: This is just an example, modifying the DOM from within
          // a controller is considered bad style.)
          $compile($("#my-element").html(template).contents())($scope);
      }, function() {
          // An error has occurred
      });
    };
});

请注意，这是手动方法，而在大多数情况下，更好的方法是定义一个使用 templateUrl 属性获取模板的指令。

此外，您可以直接绑定(bind)变量，因为它们位于同一范围内。

这是demo