通過指令將元素添加到DOM並綁定來自控制器（angular.js）的作用域監視

Question

這是一個小應用程序，您可以在其中添加，編輯和刪除項目-在控制器中進行了描述，基於角度2方式數據綁定。

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

每次添加元素時，都應以編程方式在calednar-bar中插入一個元素，如指令模板中所述：

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中創建了一個元素，但是沒有使用指令中的模板...我該怎么做？ 選擇的代碼結構是否適合該目標？

Answer 1

您需要更多的數據驅動，而不必為dom添加內容。 例如

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

從字符串到秒的轉換是最困難的部分，但這是正確的方法。