Question

开发人员指南说，指令内指定的控制器在预链接函数之前被实例化，并且在预链接函数中进行DOM操作也是不安全的。

那么为什么控制器将第三个参数$ transclude作为DOM操作，如下例所示：

testapp.directive('buttonBar', function() {
    return {
        restrict: 'EA',
        template: '<div class="span4 well clearfix"><div class="primary-block pull-right"></div><div class="secondary-block"></div></div>',
        replace: true,
        transclude: true,
        scope: {},
        controller: ['$scope', '$element', '$transclude', function ($scope, $element, $transclude) {
            $transclude(function(clone) {
                var primaryBlock = $element.find('div.primary-block');
                var secondaryBlock = $element.find('div.secondary-block');
                var transcludedButtons = clone.filter(':button'); 
                angular.forEach(transcludedButtons, function(e) {
                    if (angular.element(e).hasClass('primary')) {
                        primaryBlock.append(e);
                    } else if (angular.element(e).hasClass('secondary')) {
                        secondaryBlock.append(e);
                    }
                });
            });
        }],
    };
});

来自http://blog.omkarpatil.com/2012/11/transclude-in-angularjs.html

的讨论

由于

Answer 1

在链接阶段，似乎传递给$ transclude的函数： https://github.com/angular/angular.js/blob/v1.1.5/src/ng/compile.js#L471

已编辑：我将GH引用更改为已标记的版本，以便对我引用的代码没有任何歧义。

AngularJS指令控制器操纵DOM

1 个答案: