Question

我有以下代码用于使用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）;

我想这与范围有关，或者可能是翻译。但我无法弄清楚是什么造成这种情况。我也无法在开发者控制台中找到更新的值。

Answer 1

这里的问题是转移。 ngTransclude指令再创建一个范围，但它是兄弟范围。使用转置使得访问范围变得非常困难。在您的情况下，您可以像这样检索模型值：

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

但当然这太可怕了。幸运的是，如果手动进行转换，则可以控制转换将用于渲染模板的范围。为此，您需要使用link函数和第五个参数，即transclude函数。

您的指令将成为（请注意，您不再在模板中使用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

ng-model双向绑定不使用ui bootstrap模式

1 个答案: