Question

我的Bootstrap UI模式出现问题。

我有一个模式来捕获用户的地址详细信息，但由于某种原因，模型始终为空。我的模板的摘录：

<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>

我的控制员：

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
                }
            });
        }
    }
}

我希望对话框包含＆＃34;测试1＆＃34;和＆＃34;测试2＆＃34;数据，但它没有。我按照this plnkr的建议查看了this post，但它似乎并不适合我，这令人沮丧。

我做错了什么？

Answer 1

嘿，这是我用来在控制器和模态之间传递数据的方法，然后回来：

//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 }}

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

1 个答案: