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>';
 }

编辑：

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

Answer 1

我很难在其中插入变量，看起来很像很脏

使用$ 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属性获取模板的指令。

此外，您可以直接绑定变量，因为它们位于相同的范围内。

这里是demo

我如何把html放在javascript可变的内部

1 个答案: