angularjs - Angularjs，带有动态标签的select2和onclick

Question

我将 angularjs 与“ui_select2”指令一起使用。Select2 绘制带有格式化功能的新标签，有带有“ng-click”属性的“”元素。如何告诉 angularjs 新的 DOM 元素？否则新的“ng-clicks”将不起作用。

HTML：

<input type="text" name="contact_ids" ui-select2="unit.participantsOptions" ng-model="unit.contactIds" />

JS（角度控制器）：

anyFunction = function(id) {
    console.log(id)
}

formatContactSelection = function(state) {
    return "<a class=\"select2-search-choice-favorite\" tabindex=\"-1\" href=\"\" ng-click=\"anyFunction(state.id)\"></a>"
}

return $scope.unit.participantsOptions = {
    tags: [],
    formatSelection: formatContactSelection,
    escapeMarkup: function(m) {
        return m
    },
    ajax: {
        url: '/contacts/search',
        quietMillis: 100,
        data: function(term, page) {
            return {
                term: term,
                limit: 20,
                page: page
            }
        },
        results: function(data, page) {
            return {
                results: data,
                more: (page * 10) < data.total
            }
        }
    }

}

问题是select2创建了angularjs尚未发现的DOM元素，我读到需要使用angularjs $compile函数将新的DOM元素附加到某个元素，但我不能在控制器中使用它。

Answer 1

我找到了一个解决方案 - 我创建了该指令，该指令监视 ngModel 的变化并将其应用于已经具有 ui_select2 指令的元素。“uiRequiredTags”实现了我的 select2 标签选择所需的自定义行为。解决方案是观察 ngModel 属性的变化。

angular.module("myAppModule", []).directive("uiRequiredTags", function() {
    return {
        restrict: 'A',
        require: "ngModel",
        link: function(scope, el, attrs) {
            var opts;
            opts = scope.$eval("{" + attrs.uiRequiredTags + "}");
            return scope.$watch(attrs.ngModel, function(val) {
                var $requireLink;
                $requireLink = el.parent().find(opts.path);
                $requireLink.off('click');
                $requireLink.on('click', function() {
                    var id, n, tagIds;
                    id = "" + ($(this).data('requiredTagId'));
                    if (opts.removeLinkPath && opts.innerContainer) {
                    $(this).parents(opts.innerContainer).find(opts.removeLinkPath).data('requiredTagId', id);
                }
                tagIds = scope.$eval(opts.model).split(',');
                n = tagIds.indexOf(id);
                if (n < 0) {
                    tagIds.push(id);
                } else {
                    tagIds.splice(n, 1);
                }
                scope.$eval("" + opts.model + " = '" + tagIds + "'");
                scope.$apply();
                return $(this).toggleClass('active');
            });

        });
    }
};