javascript - AngularJS - 显式运行指令

Question

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

我需要实现如下 3 步工作流程:

1. 调用返回字符串列表的 Web 服务。例如，[“apple”、“banana”、“orange”] 等。在将其发送到 View 之前，我会拦截响应并在每个字符串周围添加尖括号。

2. 对于服务返回的每个字符串，我必须渲染

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

3. 最后，获取与要“执行”的每个字符串相对应的实际 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>
 

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

Answer 1

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

ng-include

使用 ng-include="'/path/to/template.html'" - 将请求计算的表达式 URL 并将其作为子项添加到 DOM(为您编译)。

您还可以使用 $templateCache 缓存模板(如果您想同时请求多个模板或缓存多个模板)。

看起来像这样: $templateCache.put(/path/to/template.html, '苹果 html 字符串');

自定义指令(使用 $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);
        }
      });
    }
  } 
}

如果您的数据不会改变，请记住删除观察者:-)