Question

我是AngularJS的新手，我正在努力解决以下问题。

我需要按如下方式实施3步工作流程：

调用返回字符串列表的Web服务。例如，[“apple”，“banana”，“orange”]等我拦截响应并在将它们发送到视图之前在每个字符串周围添加尖括号。
对于服务返回的每个字符串，我必须渲染
```
<apple />
<banana />
<orange />
```
最后，获取与每个字符串对应的实际AngularJS指令“执行”（不确定正确的单词是什么），并将上面的元素替换为每个元素中提到的templateUrl属性中的内容。各自的指示。

现在，我正在使用AngularJS执行上面的步骤1和步骤2。但我知道可以使用AJAX调用使用纯JavaScript完成它们。

我的问题是指令没有“运行”或“执行”，我在页面上显示为纯文本这些标签 -

    <apple />
    <banana />
    <orange />

如何告诉Angular将自定义标记替换为其模板中的实际内容？

感谢您的帮助。

更新：这是代码的样子：

<div class="content" ng-controller="mainController"> 

  <ul class="feeds">

      <li ng-repeat="fruit in fruits">

          <div ng-controller="fruitSpecificController"> {{fruit}} </div>  <!--  This renders <apple />, <banana />, etc. -->       

      </li>

  </ul>

 </div>

另请注意，每个水果都可以拥有自己的控制器。在上面的代码中，我说“fruitSpecificController”，但理想情况下，它也会在运行时生成。例如，“appleController”，“orangeController”等，是的，它们将是父“mainController”的子控制器。

Answer 1

您可能只需要使用$compile service。文档并不是非常有用，但要点是你调用$ compile，传入DOM元素（在你的情况下是指令的父元素）。返回一个函数然后执行，传入你想要使用的范围（$ rootscope可能是安全的）。

$compile(element)($rootScope);

Answer 2

您可以使用编译方法，但有一个内置指令可以为您执行此操作 - 如果您愿意通过URL加载。

NG-包括

使用ng-include="'/path/to/template.html'" - 将请求评估的表达式URL，并将其作为子项（为您编译）添加到DOM中。

您还可以使用$templateCache缓存模板（如果您想同时请求多个模板或将其缓存为多个模板）。

这看起来像这样： $templateCache.put(/path/to/template.html, 'apple html string');

自定义指令（使用$ compile）

否则，如果要加载并编译字符串 - 请在ng-repeat内使用指令。

.directive('unsafeHtmlCompile', function($compile){
  return {
    link: function(scope, element, attrs){
      scope.$watch(attrs.unsafeHtmlCompile, function(val){
        if(val !== undefined){
          element.html('');
          var el = angular.element(val);
          element.append(html);
          $compile(el)(scope);
        }
      });
    }
  } 
}

如果您的数据不会改变，请记得删除观察者： - ）

AngularJS - 显式运行指令

2 个答案:

NG-包括

自定义指令（使用$ compile）