程序问答   发布时间:2022-06-01  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了Angular UI Modal 2 Way绑定不起作用大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。

如何解决Angular UI Modal 2 Way绑定不起作用?

开发过程中遇到Angular UI Modal 2 Way绑定不起作用的问题如何解决?下面主要结合日常开发的经验,给出你关于Angular UI Modal 2 Way绑定不起作用的解决方法建议,希望对你解决Angular UI Modal 2 Way绑定不起作用有所启发或帮助;

我认为您ng-model="textBox.sample"对父级和ng- model="ngModel"模态中的印象是相同的,因为您将传递textBox.sample给模态,并且能够在模态窗口中看到正确的值。起作用的唯一原因是因$scope.ngModel每次打开模态窗口时都要显式设置属性。

使这项工作达到预期效果的一种方法是仅$scope.textBox.sample在两个地方都使用该属性,但我不建议这样做。

也许正确的方法是使用@H_748_3@modalinstance.result诺言,如下所示:

在模态上创建一个按钮并使其 ng-click="ok()"

$scope.ok = function () {
    $modalinstance.close($scope.ngModal); // will return this to the modalinstance.result
}

然后在父控制器中,或通过任何方式打开模式窗口:

$scope.open = function (_ngModel) { // The ngModel is passed from open() function in template   
    var modalinstance = $modal.open({
        templateUrl: 'ModalContent.HTML',
        controller: ModalinstanceCtrl, 
        resolve: {
            ngModel: function () {
                return _ngModel;
            }
        } // end resolve
    });

    modalinstance.result.then(function (result) {
        $scope.textBox.sample = result;
    });
};

解决方法

我添加了一个Angular UI Modal,将范围传递给Modal
Window进行2种方式绑定。我使用了该resolve方法来传递范围值。这样做可以起到一定的作用,这意味着当ng-
model值在父级中更改时,它会在模态窗口内反映出来。但是,如果值在模态窗口内更改,则不会在父ng模型中反映出来。这是我的代码:

HTML:

<div ng-app="app">
    <div ng-controller="ParentController">
        <br />
        <input type="text" ng-model="textbox.sample" /> 
        <a class="btn btn-default" ng-click="open(textbox.samplE)">Click Me</a>

        <script type="text/ng-template" id="ModalContent.html">
            <input type = "text" ng-model= "ngModel" / >
        </script>


        <br />{{ textbox }}        
    </div>
</div>

控制器:

var app = angular.module('app',['ui.bootstrap']);

app.controller('ParentController',function ($scope,$modal) {

    $scope.textbox = {};

    // MODAL WINDOW
    $scope.open = function (_ngModel) { // The ngModel is passed from open() function in template   
        var modalInstance = $modal.open({
            templateUrl: 'ModalContent.html',controller: ModalInstanceCtrl,resolve: {
                ngModel: function () {
                    return _ngModel;
                }
            } // end resolve
        });
    };
});

var ModalInstanceCtrl = function ($scope,$modalInstance,ngModel) {
    $scope.ngModel = ngModel;

};

为什么在上面的代码中isint父实例和模态实例之间的2种方式绑定不起作用?

大佬总结

以上是大佬教程为你收集整理的Angular UI Modal 2 Way绑定不起作用全部内容,希望文章能够帮你解决Angular UI Modal 2 Way绑定不起作用所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签: