angularjs transclude и нг-повторить: делать это правильно

я следующий код, который производит не ожидаемый результат:angularjs transclude и нг-повторить: делать это правильно

<div class="outer">1<div>content</div></div> 
<div class="outer">2<div>content</div></div> 
<div class="outer">3<div>content</div></div> 
<div class="outer">4<div>content</div></div>

Вместо результат:

<div class="outer">1</div> 
<div class="outer">2</div> 
<div class="outer">3</div> 
<div class="outer">4<div>content</div></div>

Кажется, что ng- повтор выполняется первым, а для последнего элемента он обрабатывает переключение. Я знаю, что ng-repeat создает узлы во время фазы компиляции, но я думал, что в фазе ссылки функция ссылок вызывается для каждого узла и добавляет встроенный контент.

Может кто-нибудь объяснить, что здесь происходит и как это сделать правильно?

<!DOCTYPE html> 
<html ng-app="Transclude"> 
<head lang="de"> 
    <meta charset="UTF-8"> 
    <title>Transclude</title> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script> 
</head> 
<body> 

    <outer ng-repeat="counter in [1,2,3,4]" value="counter"> 
    <div>content</div> 
    </outer> 

<script> 
    angular.module('Transclude', []) 

    .directive('outer', function() { 
     return { 
     restrict: 'E', 
     scope: { 
      value: '=' 
     }, 
     replace: true, 
     transclude: true, 
     template: '<div class="outer">{{value}}</div>', 

     link: function(scope, element, attributes, controller, transclude) { 
      var transcludedContent = transclude(); 
      element.append(transcludedContent); 
     } 
     }; 
    }) 

</script> 

</body> 
</html>

источник

2015-02-15 dec

Вы хотите добавить '

content

' для последнего элемента? – underscore

transclude() сам по себе просто связывает содержимое директивы с соответствующей областью и возвращает ее. То, что вы хотите сделать, это на самом деле клонировать контент (сделать его копию), прежде чем переводить ссылки на него. Поскольку ваш код стоит прямо сейчас, ваш транслируемый контент просто перемещается из одного экземпляра в другой - заканчивается на последнем, потому что, ну, он последний.

Вы можете сделать это с помощью cloneAttachFn. Вы передаете его, чтобы перевести его.

link: function(scope, element, attributes, controller, transclude) { 
     transclude(scope, function(clone) { 
      element.append(clone); 
     }); 

    }

источник

2015-02-15 08:42:24

Это делает. Большое спасибо. Где я могу получить детали, подобные этому? – dec

angularjs transclude и нг-повторить: делать это правильно

ответ

Смежные вопросы