简体   繁体   English

AngularJS:将模型传入和传出Bootstrap UI模式

[英]AngularJS: passing a model into and out of a Bootstrap UI modal

I am having trouble with my Bootstrap UI modal. 我在Bootstrap UI模式上遇到麻烦。

I have a modal to capture address details from the user, but the model is always empty for some reason. 我有一个模式来捕获用户的地址详细信息,但是由于某种原因,该模型始终为空。 An extract of my template: 我的模板摘录:

<form class="form-horizontal" style="padding: 64px;">
    <div class="form-group">
        <label for="firstName" class="col-sm-3 control-label">First name</label>
        <div class="col-sm-9">
            <input type="text" class="form-control" id="firstName" ng-model="model.firstName">
        </div>
    </div>
    <div class="form-group">
        <label for="lastName" class="col-sm-3 control-label">Last name</label>
        <div class="col-sm-9">
            <input type="text" class="form-control" id="lastName" ng-model="model.lastName">
        </div>
    </div>
    <!-- etc -->
</form>

And my controller: 而我的控制器:

module Test.Controllers {
    "use strict";

    export class ChooseAddressController {
        static $inject = ["$modal", "AddressService"];

        private addressService: Services.AddressService;

        public addresses: Array<Models.Address>;
        public modal;

        constructor($modal, addressService: Services.AddressService) {
            this.addressService = addressService;
            this.modal = $modal;
        }

        public newAddressClicked(): void {
            var newAddress = this.addressService.createNewAddress();
            this.editAddress(newAddress);
        }

        public editAddress(address: Models.Address): void {
            address.firstName = "Test 1";
            address.lastName = "Test 2";

            var modalInstance = this.modal.open({
                animation: true,
                templateUrl: 'dialogs/editAddressDialog.html',
                backdrop: "static",
                backdropClass: "windowModal",
                keyboard: false,
                resolve: {
                    model: () => address
                }
            });
        }
    }
}

I would expect that the dialog contains the "Test 1" and "Test 2" data, but it doesn't. 我希望该对话框包含“测试1”和“测试2”数据,但事实并非如此。 I have looked at this plnkr as suggested by this post but it doesn't appear to work for me, which is frustrating. 我已经看过这个plnkr所建议这个职位 ,但它似乎没有工作对我来说,这是令人沮丧的。

What am I doing wrong? 我究竟做错了什么?

Hey this is the approach I use for passing data between controller and modals and back: 嘿,这是我用来在控​​制器和模态之间传递数据的方法:

//Inject $modal into your Controller

//Call the modal from your controller


$scope.myModal = function() {
    var modalInstance = $modal.open({
        templateUrl: "some/ur/to/your/template.html",
        controller: "MyModalController",
        size: "lg",
        //Data which has to be passed into the MyModalController
        resolve: {
            data: function () {
                return {                    
                    someData: $scope.someRandomDataWhichModalNeeds
                };
            }
        }
    });

    //When $scope.confirm() is called from inside the modal do some shit with the new data!
    modalInstance.result.then(function (result) {
            console.log(result.modalData)

    });
}

//Handle data insde your modal  
//data param will be your values you need pass in
//If you want add some new data inside your modal just build upon the modalData object

function MyModalController($scope, $modalInstance, data) {

    //assign the data you passed in to the modals scope so you can bind to it
    $scope.modalData = data;
    $scope.result = {
        modalData: $scope.modalData
    }

    //Dismiss() - call this in your modal template to dismiss the modal
    $scope.cancel = function () {
        $modalInstance.dismiss();
    }

    //Call this in your template so send all the modal data back to the controller
    $scope.confirm = function () {
        $modalInstance.close($scope.result);
    }
}


//In your template file you would bind your data:
{{ modalData.someData }}

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM