Angular是否在使用jq append方法时编译指令?

时间:2016-03-09 13:57:25

标签: javascript angularjs angularjs-directive

我一直在使用$ compile服务来动态注入一个元素,但只是被意外的事情打败了。所以,这是我以前注入指令的方式:

angular
    .module('app', [])
    .directive('test', function () {
        return {
            restrict: 'E',
            controller: function () {
                console.log('hey, just got compiled!')
            }
        }
    })
    .run(function ($compile, $rootScope) {
        var $scope = $rootScope.$new()
        var directive = $compile('<test></test>')($scope)
        var app = angular.element(document.querySelector('[ng-app]'))

        app.append(directive)
    })

在这个fiddle中,您可以看到该指令似乎被编译了两次。所以我删除了$ compile技巧,它工作正常,指令编译一次:

angular
    .module('app', [])
    .directive('test', function () {
        return {
            restrict: 'E',
            controller: function () {
                console.log('hey, just got compiled!')
            }
        }
    })
    .run(function ($compile, $rootScope) {
        var app = angular.element(document.querySelector('[ng-app]'))
        app.append('<test></test>')
    })

fiddle

那么,.append编译指令吗?

我有点困惑,因为我总是看到第一个版本作为推荐版本,我在jqLike的“追加”实现中找不到与编译有关的任何内容。

1 个答案:

答案 0 :(得分:1)

这是因为run阶段在第一次编译DOM之前发生。它与使用append()

无关

此用例不需要您在$compile中使用的run()