通过指令将元素添加到 DOM 并从控制器绑定范围监视(角度.js）

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

本文关键字：范围 绑定 控制器 监视 js 角度 指令 元素 添加 DOM      更新时间：2023-09-26

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

你需要更多的数据驱动，忘记向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.

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

相关文章：