добавление дочерних элементов в HTML-представление внутри директивы Angular

Question

добавление дочерних элементов в HTML-представление внутри директивы Angular

0

Я хочу сделать это: у меня есть массив объектов внутри Angular controller и я хочу написать директиву, которая для каждого члена этого массива создает элемент div в представлении HTML и если новые элементы приводят к массиву, автоматически просматривать обновления и если элемент удален, обновления HTML тоже. я делаю это:

это мой контроллер:

app.controller("timelineCtrl", function ($scope) {
    $scope.arr={};
         .
         .
         .
}

это моя директива:

app.directive('helloWorld', function() {
    return {
        restrict: 'AE',
        replace: true,
        template: '<div> Hello {{arrayItem}} </div>',

        link: function ($scope, element, attrs) {
            //here i know that i have to write some code 
            // i have to watch any changes in array and compile it to HTML view
        }
    };
});

это мое мнение:

<div class="row" ng-controller="timelineCtrl">
     <hello-world></hello-world>
</div

Я знаю, что мне нужно написать код внутри свойства link директивы, но я не могу этого сделать. Мне нужно создать цикл для этого массива и проверить значения?

Fcoder 19 июль 2015, в 20:28

Источник

Теги:

javascript

angularjs

2 ответа

0

как насчет чего-то подобного? itterate над массивом с ng-repeat будет обрабатывать новые и удаленные элементы. (вам не нужно ничего делать в функции ссылок)

 app.directive('helloWorld', function() {
        return {
            restrict: 'AE',
            replace: true,
            scope:{
                   arrayItem: '=ngModel'
              },
        template: '<div> Hello {{arrayItem}} </div>',

    };
});


<div class="row" ng-controller="timelineCtrl">
     <hello-world ng-repeat="arrayItem in arr" ng-model="arrayItem"></hello-world>
</div>

Ori Price 19 июль 2015, в 16:22

Ещё вопросы

just-boris · Accepted Answer · 2015-07-19T15-33-00.000Z

Угловое имеет директиву ng-repeat для отображения элементов в массивах. Для ваших целей вы можете создать директиву, отвечающую за логику отдельных элементов, и использовать ng-repeat для рендеринга этих элементов. Ng repeat позаботится о добавлении или удалении элементов из массива:

<div class="row" ng-controller="timelineCtrl">
    <hello-world ng-repeat="arrayItem in arr" array-item="arrayItem"></hello-world>
</div

Чтобы распространять данные элемента в директиве, вы должны сделать эту конфигурацию

app.directive('helloWorld', function() {
  return {
    restrict: 'AE',
    template: '<div> Hello {{arrayItem}} </div>',
    scope: {
       arrayItem: '=' // this means that scope value should be taken from attribute with corresponding name
    },

    link: function ($scope, element, attrs) {
        // your logic with single arrayItem
        // item available as $scope.arrayItem
    }
  };
});

Вы можете узнать больше о том, как это работает в угловых документах, на этой странице см. Раздел "Область"

Вы можете заполнить раздел ссылок? это не работает для меня
Что вы ожидаете? Посмотрите на скрипку с моим кодом , в списке три элемента