通过指令将元素添加到 DOM 并从控制器（angular.js）绑定范围观察答案

【问题标题】：Add element to DOM via directive and bind scope watching from controller (angular.js)通过指令将元素添加到 DOM 并从控制器（angular.js）绑定范围观察
【发布时间】：2014-04-07 12:47:50
【问题描述】：

这是一个小应用程序，您可以在其中添加、编辑和删除项目 - 所有这些都在控制器中描述，基于 Angular 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 中创建了一个元素，但不使用指令中的模板...我该怎么做？选择的代码结构是否适合这个目标？

【问题讨论】：

请考虑改写，或发布一些代码。我已经重新阅读了大约 10 次，但仍然不理解您的问题。我认为您需要停止担心“dom”并找到一种更多数据方式来驱动您的模板。
谢谢你，尼克斯。更新。问题是我需要为同一件事创建两个差异视图：用户通过输入添加项目，应用程序应该以编程方式将元素添加到日历中。此元素应与输入和列表项共享相同的范围，并且其中的数据应始终保持绑定。
老实说，我认为没有 angular.element().append() 一切都会正常工作。您只需要解决“字符串”时间问题。我个人经常使用 MomentJS，效果很好。
找到了一个有趣的解决方案：stackoverflow.com/questions/21667613/…

标签： javascript jquery angularjs dom 2-way-object-databinding

【解决方案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.

从字符串到秒的转换是最难的部分，但它是正确的方法。

【讨论】：