Angularjs, select2 с динамическими тегами и onclick

Я использую angularjs с директивой ui_select2. Select2 рисует новые теги с функцией форматирования, есть элементы "" с атрибутом "ng-click". Как сообщить angularjs о новых элементах DOM? В противном случае новые «ng-клики» не будут работать.

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 создает элементы DOM, которые еще не обнаружены angularjs, я читал, что новые элементы DOM необходимо добавлять к какому-либо элементу с помощью функции angularjs $compile, но я не могу использовать ее в контроллере.


angularjs angularjs-select2 ui-select2
person focused    schedule 06.11.2013    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Я нашел решение - я создал директиву, которая следит за изменениями в 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');
            });

        });
    }
};
person focused    schedule 08.11.2013