插入的角度JS模板串的元素中 [英] Insert an angular js template string inside an element

问题描述

我试着去把一些角JS模板字符串的元素在里面，并期待一个符合输出。但是，这不会发生。

Im trying to put some angular js template string inside an element, and expect an complied output. But that's not happening.

HTML

<div ng-controller="testController">
    <div ng-bind-html-unsafe="fruitsView"></div>
</div>

控制器：

function filterController($scope){
    ...
    $scope.arr = ["APPLE", "BANANA"];
    $scope.fruitsView = '<div><p ng-repeat="each in arr">{{each}}</p></div>';
}

在输出中仅 {{}每个} 。

让我怎么插入元素内部的角度JS模板字符串（这里 $ scope.fruitsView ）？

So how do i insert an angular js template string (here $scope.fruitsView) inside an element?

我已经做了小提琴这一点。

推荐答案

在这种情况下，你不想只是插入HTML，而是编译它。您可以创建使用 $编译服务DOM节点。

In this case, you don't want to just "insert HTML", but compile it. You can create DOM nodes using the $compile service.

var tpl = $compile( '<div><p ng-repeat="each in arr">{{each}}</p></div>' )( scope );

正如你所看到的， $编译返回一个函数，它接受一个范围对象作为参数，对其中code进行了评价。所得的内容可以插入到DOM与 element.append（）例如

As you can see, $compile returns a function that takes a scope object as a parameter, against which the code is evaluated. The resultant content can be inserted into the DOM with element.append(), for example.

重要提示：但下的任何情况下的是否有任何DOM相关code在控制器属。正确的位置是的总是的指令。这code很容易被扔进一条指令，但我不知道为什么你是编程插入HTML的。

Important note: But under no circumstances does any DOM-related code belong in your controller. The proper place is always a directive. This code can easily be thrown into a directive, but I wonder why you are programmatically inserting the HTML at all.

你能提供一些线索在这里，所以我可以提供一个更明确的答案？

Can you shed some light here so I can provide a more specific answer?

更新

假设你的数据来自服务：

Assuming your data comes from a service:

.factory( 'myDataService', function () {
  return function () {
    // obviously would be $http
    return [ "Apple", "Banana", "Orange" ];
  };
});

和模板来自服务

.factory( 'myTplService', function () {
  return function () {
    // obviously would be $http
    return '<div><p ng-repeat="item in items">{{item}}</p></div>';
  };
});

然后创建一个简单的指令，将读取提供的模板，编译它，并将其添加到显示：

Then you create a simple directive that reads in the provided template, compiles it, and adds it to the display:

.directive( 'showData', function ( $compile ) {
  return {
    scope: true,
    link: function ( scope, element, attrs ) {
      var el;

      attrs.$observe( 'template', function ( tpl ) {
        if ( angular.isDefined( tpl ) ) {
          // compile the provided template against the current scope
          el = $compile( tpl )( scope );

          // stupid way of emptying the element
          element.html("");

          // add the template content
          element.append( el );
        }
      });
    }
  };
});

然后从你的观点：

Then from your view:

<div ng-controller="MyCtrl">
   <button ng-click="showContent()">Show the Content</button>
   <div show-data template="{{template}}"></div>
</div>

和控制器，只需绑在一起：

And in the controller, you simply tie it together:

.controller( 'MyCtrl', function ( $scope, myDataService, myTplService ) {
  $scope.showContent = function () {
    $scope.items = myDataService(); // <- should be communicated to directive better
    $scope.template = myTplService();
  };
});

和它应该一起努力吧！

PS：这是所有假设你的模板来自服务器。如果没有，那么你的模板应该是指令，它简化了的东西。

PS: this is all assuming your template comes from the server. If it doesn't, then your template should be in the directive, which simplifies things.

这篇关于插入的角度JS模板串的元素中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！