AngularJS ui模式传递数据

Posted 2023-05-07

【中文标题】AngularJS ui模式传递数据

【英文标题】：AngularJS ui modal passing data

【发布时间】：2016-01-30 11:19:17

【问题描述】：

这是ui-select，用户可以在其中选择一个选项：

<ui-select ng-model="state.selected" ng-change="openModal(state.selected,orders.order_id)" ng-if="orders.state == 'Paid'" theme="selectize" ng-disabled="disabled" style="width: 300px;"> .....

只要有变化，就会从引导触发模态

$scope.openModal = function(name,oid)
    $scope.modalInstance = $modal.open(
        templateUrl: 'reservationModal.html',
        scope:$scope,
        name: function()
            return name;
        
    );


$scope.cancel = function()
    $scope.modalInstance.dismiss();


$scope.confirmChg = function()
    console.log('ok...');

模板如下：

<script type="text/ng-template" id="reservationModal.html">
    <div class="modal-header">
        <h3 class="modal-title">Confirmation</h3>
        <!--<button class="btn btn-warning" ng-click="close()">X</button>-->
    </div>
    <div class="modal-body">
        Confirm to change status to name ?

    </div>
    <div class="modal-footer">
        <button class="btn btn-danger" type="button" ng-click="confirmChg(status_oid,status)">Yes</button>
        <button class="btn btn-warning" type="button" ng-click="cancel()" data-dismiss="modal">No</button>
    </div>
</script>

问题是，模板中的name 没有显示。如何从打开的模态函数中传递变量？

【问题讨论】：

我会说通常我们会通过 resolve 方法将数据传递给模态控制器，而不是将 $scope 传递给模态：***.com/questions/18576454/…

【参考方案1】：

你需要在作用域上设置名称，只需添加一行：

$scope.name = name;

在调用 $scope.open 之前。所以 openModal 函数看起来像：

$scope.openModal = function(name,oid)
    $scope.name = name;
    $scope.modalInstance = $modal.open(
        templateUrl: 'reservationModal.html',
        scope:$scope,
        name: function()
            return name;
        
    );

【讨论】：

我在哪里设置的？内部名称函数？

就在openModal的开头。我刚刚澄清了答案。