Question

我正在开发一个AngularJS应用程序，我正在使用以下指令

app.directive('w34Lang', function () {
return {
    restrict: "A",
    template : "<select ng-model='language'><option selected disabled value=''>Language</option></select>",
    link: function (scope, elem) {
        scope.isolateScope = true;
      var lang=   angular.element( elem.find('select')[0]);
        var langs = ["arabic" ,"english","Portugal"]
        for (var i = 0; i < langs.length; i++) {
            lang.append('<option value="'+langs[i]+'">'+langs[i]+'<otion>');

        }


        }
    }

})

HTML中的

我使用这个指令没有问题，问题是当我添加一个带有相同指令的动态创建的DOM元素时。它只是在HTML中创建但指令未应用于它。

无论如何将指令应用于动态创建的DOM？

Answer 1

从未听说过exec，或者未能找到任何相关文档。那是什么？

无论如何，在link函数中，您需要编译动态生成的DOM。像这样：

app.directive('w34Lang', function () {
    return {
        restrict : "A",
        template : "<select ng-model='language'><option selected disabled value=''>Language</option></select>",
        scope: {},
        link: function (scope, elem, attrs) {
            var langs = ["arabic", "english", "Portugal"];

            for (var i = 0; i < langs.length; i++) {
                var template = '<option value="' + langs[i] + '">' + langs[i] + '</option>';

                elem.append(angular.element(template));
            }
        }
    }
});

将指令应用于动态创建的DOM

1 个答案: