AngularJS: обновление модели передано в директиву

Question

Я пытаюсь сделать директиву, которая вставляет элементы после ввода (который помечен с помощью директивы), но также обновляет ввод от вставленных элементов.

angular.module('afterDir', [])
.directive('after', function ($compile) {

    return {
        require: 'ngModel',
        link: function (scope, element, attrs, ngModel) {

            scope.clickHandler = function (index) {

                console.log(index);
                ngModel.$setViewValue("something");

            }

            var content = angular.element('<ul><li ng-click="clickHandler()">after</li><li ng-click="clickHandler()">after too</li></ul>');
            content.insertAfter(element);
            $compile(content)(scope);

        }
    }
});

Обработчик щелчка срабатывает, но модель не обновляется. Нужно ли вызывать что-то еще, чтобы обновить модель? Спасибо!

Answer 1

Если вы добавите ngModel.$ Render() после вашего $setViewValue(), вы должны получить то, что вам нужно.

Вот такой вот панкр. http://plnkr.co/edit/nZgMiZZD4Vna6vMb4LZr

Для некоторого объяснения $ setViewValue обновит внутреннее viewValue контроллеров, при необходимости испачкает форму и обновит внутреннее modelValue, а также саму модель.

$ render фактически возьмет это внутреннее viewValue и отправит его в DOM.