Arhn - архитектура программирования

Как применить директиву AngularJS к элементу после завершения вложенного ng-repeat

HTML выглядит так:

<div ng-controller="MainCtrl">
    <outer>
      <inner ng-repeat="d in data">
        <div>{{d}}</div>
      </inner>
    </outer>
</div>

Повтор работает, и внутренняя директива применяется, как и ожидалось.

Внешняя директива выглядит так:

directives.directive('outer', function () {
    return {
        compile: function (elm) {
           // ... do some jQuery
        }
    }
});

Без повтора внешняя директива применяется, как и ожидалось. Но с повтором внешняя директива применяется до того, как повтор запишет соответствующие узлы в DOM.

Я видел предложения использовать тайм-аут в директиве, что мне кажется чем-то вроде взлома. Кроме того, похоже, что есть хук готового повтора, который я мог бы использовать, чтобы затем изменить область действия и повторно применить директиву.

angularjs angularjs-directive angularjs-scope
29.10.2013

  • Этот пост SO поможет вам stackoverflow.com/questions/15207788/ 29.10.2013
  • @Чандермани - Спасибо. Я попытался добавить во внутреннюю директиву: if (scope.$last === true){ $timeout(function () {scope.finished = true;});}, а затем смотреть из внешней директивы. Область видимости меняется, но срабатывает первый элемент, а не последний. 29.10.2013
  • Вы не должны делать scope.finished=true; внутри вашей дочерней директивы. Это устанавливает локальную область действия. Вы должны $scope.$emit создать событие. 29.10.2013

Ответы:


1

Вот как я это решил:

HTML:

<!doctype html>
<html ng-app="myApp">

<head>
  <meta charset="utf-8">
  <title>AngularJS Plunker</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css">
  <script data-require="[email protected]" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.js"></script>
  <script src="app.js"></script>
</head>
<body>

  <div ng-controller="MainCtrl">
    <outer>
      <inner ng-repeat="d in data">
        <div>{{d}}</div>
      </inner>
    </outer>
  </div>
</body>

</html>

App.js:

var myApp = angular.module('myApp', ['myApp.directives']);

myApp.controller('MainCtrl', function($scope) {
  $scope.data = [1, 2, 3];
});

var directives = angular.module('myApp.directives', []);

directives.directive('inner', function() {

  return {
        restrict: 'E',
        scope: true,
        link: function(scope, element, attrs) {
            element.append("<div>Processing inner element.</div>");
            if (scope.$last) {
              element.append("Processed last inner element.");
              scope.$emit('foo', "");
            }
        }
  }      
});

directives.directive('outer', function() {
  return {
        restrict: 'E',
        scope: true,
        link: function(scope, element, attrs) {
            scope.$on('foo', function() {
              element.append("<div>Finished outer processing.</div>");
              element.append(element.getChildren());
              // this is critical if jQuery altered DOM in inner directive
              scope.$apply();
            });
        }
  }      
});

Выход:

1
Processing inner element.
2
Processing inner element.
3
Processing inner element.
Processed last inner element.
Finished outer processing.

Планкер: http://plnkr.co/edit/tMXq7fFeNLnDbn9ORdUS

@Changermani - Спасибо за толчок!

31.10.2013

2

Мое предложение состоит в том, чтобы обрабатывать повтор внутри вашего шаблона директивы.

directives.directive('outer-directive', function () {
return {
    template:"<div ng-repeat='d in data'>"
                 + "<innerDirective id={{d.id}} text={{d.text}} />"
              +"</div>",
    controller: function ($scope, $element, $attrs){
           $scope.data = getData();
    }
    compile: function (elm) {
       // ... do some jQuery
    }
}
});
29.10.2013
  • Желаемое поведение состоит в том, что внутренняя директива сначала записывает в DOM, а затем к результату применяется внешняя директива. 29.10.2013
    • Новые материалы
    Коллекции публикаций по глубокому обучению
    Последние пару месяцев я создавал коллекции последних академических публикаций по различным подполям глубокого обучения в моем блоге https://amundtveit.com - эта публикация дает обзор 25..
    Представляем: Pepita
    Фреймворк JavaScript с открытым исходным кодом Я знаю, что недостатка в фреймворках JavaScript нет. Но я просто не мог остановиться. Я хотел написать что-то сам, со своими собственными..
    Советы по коду Laravel #2
    1-) Найти // You can specify the columns you need // in when you use the find method on a model User::find(‘id’, [‘email’,’name’]); // You can increment or decrement // a field in..
    Работа с временными рядами спутниковых изображений, часть 3 (аналитика данных)
    Анализ временных рядов спутниковых изображений для данных наблюдений за большой Землей (arXiv) Автор: Рольф Симоэс , Жильберто Камара , Жильберто Кейрос , Фелипе Соуза , Педро Р. Андраде ,..
    3 способа решить квадратное уравнение (3-й мой любимый) -
    1. Методом факторизации — 2. Используя квадратичную формулу — 3. Заполнив квадрат — Давайте поймем это, решив это простое уравнение: Мы пытаемся сделать LHS,..
    Создание VR-миров с A-Frame
    Виртуальная реальность (и дополненная реальность) стали главными модными терминами в образовательных технологиях. С недорогими VR-гарнитурами, такими как Google Cardboard , и использованием..
    Демистификация рекурсии
    КОДЕКС Демистификация рекурсии Упрощенная концепция ошеломляющей О чем весь этот шум? Рекурсия, кажется, единственная тема, от которой у каждого начинающего студента-информатика..