如何在不分离范围创建递归Angular.js模板？ [英] How to Create recursive Angular.js Templates without isolating scope?

问题描述

我有一个递归数据结构，我想在Angular.js重新present。一个简化的演示，请访问：

I have a recursive data structure I am trying to represent in Angular.js. a simplified demo is available here:

http://plnkr.co/edit/vsUHLYMfI4okbiVlCK7O?p=$p$ PVIEW

在preVIEW，我有一个递归对象下面的HTML：

In the Preview, I have the following HTML for a recursive object:

<ul>
  <li ng-repeat="person in people">
    <span ng-click="updateClicks(person)">{{person.name}}</span>
    <ul>
      <li ng-repeat="kid in person.kids">
        <span ng-click="updateClicks(kid)">{{kid.name}}</span>
      </li>
    </ul>
  </li>
</ul>

在我的应用程序中，视图是要复杂得多。我想有一个方法来生成每个人在递归的方式模板HTML。我试着用一个指令，这样做，但是我跑进了无限循环的问题时，我并没有孤立的范围。而当我的没有的隔离范围，我不再能够调用绑到控制器（本例中的功能，在 updateClicks 功能但是在我的应用程序有几个）。

In my application, the view is much more complex. I would like to have a way to generate the template html for each person in a recursive fashion. I tried doing this with a directive, however I ran into issues with infinite loops when I did not isolate the scope. And when I did isolate the scope, I was no longer able to call functions that are tied to the controller (in this example, the updateClicks function, however in my application there are several).

我怎么能生成html为这些对象递归，仍然可以调用属于控制器功能？

How can I generate html for these objects recursively, and still be able to call functions belonging to a controller?

推荐答案

我觉得要做到这一点的最好办法是用$放出。

I think the best way to do this is with an $emit.

假设你的递归指令如下：

Let's say your recursive directive looks like this:

directive('person', function($compile){
  return{
  restrict: 'A',
  link: function(scope, element, attributes){
    //recursive bit, if we've got kids, compile & append them on
    if(scope.person.kids && angular.isArray(scope.person.kids)) {
     $compile('<ul><li ng-repeat="kid in person.kids" person="kid"></li></ul>')(scope, function(cloned, scope){
       element.find('li').append(cloned); 
     });
    }
  },
  scope:{
    person:'='
  },
  template: '<li><span ng-click="$emit(\'clicked\', person)">{{person.name}}</span></li>'
  }
});

注意 NG-点击=$发射出（点击，人） code，不要分心\\，这只是在那里逃脱。 $范围。$发出将发送一个事件一路上涨的范围链，这样，在你的控制器，你点击的功能大多停留不变，但现在不是伍点击，你听该事件被触发。

notice the ng-click="$emit(clicked, person)" code, don't be distracted the \, that's just there to escape. $scope.$emit will send an event all the way up your scope chain, so that in your controller, your clicked function stays mostly unchanged, but now instead of being triggered by ng-click, you're listening for the event.

$scope.$on('clicked', function(event, person){
  person.clicks++;
  alert(person.name + ' has ' + person.clicks + ' clicks!');
});

很酷的事情是该事件的对象，甚至有从递归指令隔离范围。

cool thing is that the event object even has the isolated scopes from your recursed directives.

下面是完全工作plnkr： http://plnkr.co/edit/3z8OXOeB5FhWp9XAW58G p = preVIEW
甚至下降到第三级，以确保递归是工作。

Here's the fully working plnkr: http://plnkr.co/edit/3z8OXOeB5FhWp9XAW58G?p=preview even went down to tertiary level to make sure recursion was working.

这篇关于如何在不分离范围创建递归Angular.js模板？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！