Двусторонняя привязка ng-model не работает с модальным ui bootstrap

У меня есть следующий код для работы с модальным загрузчиком пользовательского интерфейса. У меня есть поле ввода, значение которого должно быть зафиксировано на контроллере. Но значение поля ввода не отображается на контроллере после ввода значения в модальном режиме.

angular.module('myApp')
.controller('mainController', ['$scope', '$modal', function($scope, $modal) {

    $scope.openModal = function() {
        $modal.open({
            templateUrl: 'modal.html',
            controller: BoardController
        });
    };
}])

.directive('modalDialog', function() {
    return {
        restrict: 'E',
        replace: true,
        transclude: true,
        template:
            '<div class="modal-content">' +
                '<div class="modal-header">' +
                '<h4 ng-bind="dialogTitle"></h4>' +
                '</div>' +
                '<div class="modal-body" ng-transclude></div>' +
                '<div class="modal-footer">' +
                '<button type="button" class="btn btn-default" ' +
                'ng-click="cancel()">Close</button>' +
            '<button type="button" class="btn btn-primary" ' +
                'ng-click="ok()">Save</button>' +
                '</div>' +
            '</div>'
    };
});

var BoardController = function ($scope, $modalInstance) {
    $scope.dialogTitle = 'Create new item';
    $scope.placeholder = 'Enter item name';
    $scope.inputname = '';

    $scope.ok = function () {

        console.log($scope.inputname);
        $modalInstance.dismiss('cancel');
    };

    $scope.cancel = function () {
        $modalInstance.dismiss('cancel');
    };
};

В 'modal.html' у меня есть следующий код:

<modal-dialog>
    <input type="text" class="form-control" id="enter-name"
           ng-model="inputname" placeholder={{placeholder}}>
    {{ inputname }}
</modal-dialog>

Итак, после ввода некоторого текста в поле ввода, когда я нажимаю кнопку «Сохранить», следующая строка в $scope.ok() печатает blank.

console.log($scope.inputname);

Я предполагаю, что это как-то связано с областями или может быть включением. Но я не могу понять, что вызывает это. Я также не смог найти обновленное значение в консоли разработчика.


angularjs twitter-bootstrap angular-ui-bootstrap
person jsbisht    schedule 21.03.2015    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Проблема здесь в трансклюзии. Директива ngTransclude создает еще одну область действия, но это родственный элемент объем. Использование трансклюзии очень затрудняет доступ к вашей области видимости. В вашем случае вы можете получить значение модели следующим образом:

$scope.ok = function () {
    console.log($scope.$$childHead.$$nextSibling.inputname);
    $modalInstance.dismiss('cancel');
};

Но это, конечно, ужасно. К счастью, вы можете управлять тем, какая область включения будет использоваться для отображаемого шаблона, если вы сделаете включение вручную. Для этого вам нужно использовать функцию link с пятым аргументом, который является функцией включения.

Ваша директива станет (обратите внимание, что вы больше не используете директиву ng-tranclude в шаблоне):

.directive('modalDialog', function() {
    return {
        restrict: 'E',
        replace: true,
        transclude: true,
        template:
            '<div class="modal-content">' +
                '<div class="modal-header">' +
                    '<h4 ng-bind="dialogTitle"></h4>' +
                '</div>' +
                '<div class="modal-body"></div>' +
                '<div class="modal-footer">' +
                    '<button type="button" class="btn btn-default" ng-click="cancel()">Close</button>' +
                    '<button type="button" class="btn btn-primary" ng-click="ok()">Save</button>' +
                '</div>' +
            '</div>',
        link: function(scope, element, attrs, controller, transclude) {
            transclude(scope, function(clone) {
                var modalBody = element[0].querySelector('.modal-body');
                angular.element(modalBody).append(clone);
            });
        }
    };
});

Демо: http://plnkr.co/edit/I7baOyjx4pKUJHNkxkDh?p=preview

person dfsq    schedule 21.03.2015
comment
Спасибо. Я пока решил обойтись без трансклюзии :) - person jsbisht; 21.03.2015
comment
Я бы также избегал этого, если это возможно. Но теперь вы знаете, как это работает более или менее. - person dfsq; 21.03.2015
comment
Да, конечно. Я могу использовать их лучше в будущем. - person jsbisht; 21.03.2015