Question

对于我的特定应用程序，我希望能够在自定义指令上使用ng-repeat并通过对象的属性进行跟踪。

我遇到的问题是我故意不希望我的自定义指令在编写它的DOM中呈现。我想获取模板（包括指令元素）和一些存在于其父范围内的变量，并将它们编译并附加到由第三方库生成的某个标记内。

这样我可以写出类似的内容：

<my-directive ng-repeat="item in items track by item.id"
              ng-click="someCtrl.doSomethingWithAService();">
</my-directive>

并将此代码附加到其他地方以相同的方式运行。

正在重复的集合可能会经常更改，但我不想重新创建附加的内容，并且希望能够在销毁每个指令实例的范围时将其删除。

我尝试过尽可能多的方法，而且有些方法已经足够好了＃34;我现在遇到的主要问题是，当更新集合时，没有更改的跟踪项最终会被添加到最初编写标记的DOM中。

所以在第一次加载时，一切正常。更新集合：指令逻辑不会再次运行，元素会附加到ng-repeat所在的位置。

有什么想法吗？

编辑：

window.angular.module('my.module')
    .directive('myDirective', ['myService',
        function (myService) {
            return {
                restrict: 'E',
                scope: true,
                replace: true,
                templateUrl: '/path/to/template.tpl.html',
                compile: function (tElement, tAttributes) {
                    tElement.removeAttr('ng-repeat');
                    return {
                        post: function (scope, iElement, iAttributes, controller, transcludeFn) {
                            iElement.remove();
                            var item = myService.addItem(scope, iElement[0].outerHTML);
                            scope.$on('$destroy', function () {
                            // remove item added in service
                            });
                        }
                    };
                }
            };
        }]);

该指令基本上就是这样。

服务：

window.angular.module('my.module')
    .factory('myService', ['$compile', function ($compile) {
        function addItem(scope, template) {
            var element = angular.element(document.querySelector('some-selector'));
            element.html('').append($compile(template)(scope));
        }
        return {
            addItem: addItem
        };
    }]);

使用ngRepeat track时，不要在移动

0 个答案: