Add element to DOM via directive and bind scope watching from controller (angular.js)

Question

Here is the little app in which you can add items, edit them and delete - all described in controller, based on angular 2 way data-bind.

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

Everytime the element is added, in the calednar-bar programmatically should be inserted an element, described in directive's template:

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>'

Though I can't get it how to link the scope from controller, bind the element insertion from the controller:

$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;
      }

as I understand now, my code creates an element in the DOM, but doesn't use template from directive... How can I do it? Is the chosen structure of code appropriate to this goal?

Please consider rewording, or posting some code. I have re-read this about 10 times and still dont understand your issues. I think you need to stop worrying about the "dom" and find a more data way to drive your templates. — Nix, Apr 07 '14 at 13:04
thank you, Nix. updated. the problem is that i need to create two diff views of the same thing: user adds the item via inputs and the app should programmatically add the element to the calendar. this element should share the same scope as inputs and list-items and the data in them should stay always binded. — orendzi, Apr 07 '14 at 13:39
I honestly think things will work fine without the angular.element().append(). You just need to solve the "String" time issue. I personally use MomentJS a lot, and it works well. — Nix, Apr 07 '14 at 13:57
found one interesting solution: http://stackoverflow.com/questions/21667613/in-angular-how-to-pass-json-object-array-into-directive — orendzi, Apr 10 '14 at 06:06

score 0 · Answer 1 · answered Apr 07 '14 at 13:15

You need to be more data driven, forget about adding things to the dom. E.g.

$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">

Instead of Saving StartTime as a string save it as a number, and use a filter to convert from seconds to your friendly HH:MM:AM|PM.

The conversion from string to seconds is the hardest part, but it is the right way to do it.

Add element to DOM via directive and bind scope watching from controller (angular.js)

1 Answers1