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

标签 javascript angularjs angularjs-directive

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

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 的“追加”实现中找不到任何与编译相关的内容。

最佳答案

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

无关

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

关于javascript - Angular 在使用 jq append 方法时是否编译指令?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35893643/

相关文章:

javascript - 将 ondblclick 事件绑定(bind)到列表中的每个项目并在事件中传递该项目的值

javascript - Shield UI 条形图重叠

javascript - 如何修复从 ng-change 上的函数传递的意外参数用于选择列表?

angularjs - 嵌套指令之间的通信

javascript - 在新窗口中打开动态构建的 Google URL

javascript - 使用 += 获取总和在这里不起作用。为什么?

asp.net - 如何使用 ASP.NET Web 服务后端对 AngularJS 进行单元测试

angularjs - 无法实例化模块 ngCookies

javascript - 检查下一个项目是否存在于 ng-repeat 项目中

javascript - ui-sref 或 $state.go 不适用于第一个指令