Добавить элемент в DOM с помощью директивы и привязать область наблюдения с контроллера (angular.js)

Вот небольшое приложение, в котором вы можете добавлять элементы, редактировать их и удалять - все описано в контроллере, основанном на двухсторонней привязке данных angular.

http://cssdeck.com/labs/schedule-of-the-red-hood

Каждый раз при добавлении элемента в каледнар-бар программно должен быть вставлен элемент, описанный в шаблоне директивы:

template: '<div ng-repeat="event in events" class="event">' +
                    '<h3 ng-model="event.Name">{{event.Name}}</h3>' +
                    '<span ng-model="event.StartTime; event.EndTime" class="time">{{event.StartTime}}-{{event.EndTime}}</span>' +
                  '</div>'

Хотя я не могу понять, как связать область действия с контроллером, привязать вставку элемента из контроллера:

$scope.addEvent = function(event, attrs) {
        $scope.events.push(event);
        $scope.event = {};  
        var eventGrid = angular.element(document.createElement('eventGrid')),
            el = $compile(eventGrid)($scope);            
        angular.element(document.body).append(eventGrid);
        $scope.insertHere = el;
      }
  • как я теперь понимаю, мой код создает элемент в DOM, но не использует шаблон из директивы... Как мне это сделать? Соответствует ли выбранная структура кода этой цели?

javascript jquery dom angularjs 2-way-object-databinding
person orendzi    schedule 07.04.2014    source источник
comment
Пожалуйста, рассмотрите возможность переформулировки или публикации кода. Я перечитал это около 10 раз и до сих пор не понимаю ваших проблем. Я думаю, вам нужно перестать беспокоиться о dom и найти способ с большим объемом данных для управления вашими шаблонами.   -  person Nix    schedule 07.04.2014
comment
спасибо, Никс. обновлено. проблема в том, что мне нужно создать два разных представления одного и того же: пользователь добавляет элемент через входы, а приложение должно программно добавить элемент в календарь. этот элемент должен иметь ту же область действия, что и входные данные и элементы списка, и данные в них должны всегда оставаться связанными.   -  person orendzi    schedule 07.04.2014
comment
Я искренне думаю, что все будет работать нормально без angular.element().append(). Вам просто нужно решить проблему времени String. Я лично много использую MomentJS, и он работает хорошо.   -  person Nix    schedule 07.04.2014
comment
нашел одно интересное решение: stackoverflow.com/questions/21667613/   -  person orendzi    schedule 10.04.2014

Ответы (1)


arrow_upward
0
arrow_downward

Вам нужно больше ориентироваться на данные, забудьте о добавлении вещей в дом. Например.

$scope.addEvent = function(event, attrs) {
    $scope.events.push(event);
    $scope.event = {};  
    /*var eventGrid = angular.element(document.createElement('eventGrid')),
        el = $compile(eventGrid)($scope);            
    angular.element(document.body).append(eventGrid);
    $scope.insertHere = el;*/
}


//add an order by to your ng-repeat
<li ng-repeat="event in events|orderBy:StartTime">

Вместо сохранения StartTime в виде строки сохраните его как число и используйте фильтр для преобразования секунд в удобные HH:MM:AM|PM..

Преобразование строки в секунды — самая сложная часть, но это правильный способ сделать это.

person Nix    schedule 07.04.2014