AngularJS-明确运行指令 [英] AngularJS - Run directives explicitly

问题描述

我是AngularJS的新手，我正为以下问题苦苦挣扎.

我需要实现一个三步工作流，如下所示:

1. 拨打电话返回一个字符串列表的Web服务.例如[[apple]，"banana"，"orange"]等.在将响应发送到View之前，我拦截响应并在每个字符串的周围加上尖括号.

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

   <苹果/><香蕉/><橙色/>

3. 最后，获取与每个字符串相对应的实际AngularJS指令以执行"(不确定正确的单词是什么)，并将上述元素替换为templateUrl属性中的内容，如其各自所提及相应的指令.

现在，我正在使用AngularJS进行上述步骤1和步骤2.但我知道可以通过使用AJAX调用的普通JavaScript来完成这些操作.

我的问题是指令不会运行"或执行"，并且这些标记在页面上显示为纯文本-

<苹果/><香蕉/><橙色/>

等.

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

感谢您的帮助.

更新:这是代码的样子:

< div class ="content" ng-controller ="mainController">< ul class ="feeds">< li ng-repeat =水果中的水果">< div ng-controller ="fruitSpecificController"> {{fruit}}</div><！-呈现< apple/>，<香蕉/>等-></li></ul></div>

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

解决方案

您可以使用compile方法，但是如果您愿意通过URL进行加载，则有一个内置指令将为您执行此操作./p>

ng-include

使用 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){返回 {链接:函数(作用域，元素，属性){scope.$ watch(attrs.unsafeHtmlCompile，function(val){if(val！==未定义){element.html('');var el = angular.element(val);element.append(html);$ compile(el)(作用域);}});}}} 

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

I'm new to AngularJS and I'm struggling with the following issue.

I need to implement a 3 step workflow as follows:

1. Make a call to a web service that returns a list of strings. For example, ["apple", "banana", "orange"], etc. I intercept the response and add the angle brackets around each of these strings before I send it to the Views.

2. For each of the string returned by the service, I have to render

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

3. Finally, get the actual AngularJS directive corresponding to each of those strings to "execute" (not sure what the right word is) and replace the elements above with the content from the templateUrl property as mentioned in each of their respective directives.

Right now, I'm doing Step 1 and Step 2 above using AngularJS. But I understand that they can be done using plain JavaScript using AJAX calls.

My problem is that the directives don't get "run" or "executed" and I have these tags displayed as plain text on the page -

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

etc.

How do I tell Angular to replace the custom tags with the actual content from their templates?

Thanks for your help.

UPDATE: Here's what the code looks like:

<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>
 

Also note that each fruit can have its own controller. In the code above, I say "fruitSpecificController", but ideally that would also be generated at runtime. For example, "appleController", "orangeController", etc. and yes, they'll be child controllers of the parent "mainController".

解决方案

You can use the compile method, but there is a built in directive that will do this for you - if you are willing to load in via a URL.

ng-include

Using ng-include="'/path/to/template.html'" - the evaluated expression URL will be requested and added to the DOM as a child (compiled for you).

You can also cache the templates using $templateCache (if you want to request multiple templates at the same time or cache it for multiple includes).

That would look something like this: $templateCache.put(/path/to/template.html, 'apple html string');

custom directive (with $compile)

Otherwise, if you want to load in and compile a string - use a directive inside of a 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);
        }
      });
    }
  } 
}

Remember to remove the watcher, if your data won't change :-)

这篇关于AngularJS-明确运行指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！