使用 uibmodal 控制器绑定模板视图

Posted 2023-02-23

【中文标题】使用 uibmodal 控制器绑定模板视图

【英文标题】：binding template view with uibmodal controller

【发布时间】：2017-11-28 12:16:09

【问题描述】：

我在我的一个控制器中使用 uibmodal，并设法将数据传递给模态控制器。 但是，一旦数据在我的模态控制器中传递，我无法弄清楚如何在模态模板中呈现这些数据。

我的主控制器：

doEdit = function () 
        var modalScope = $scope.$new(false);
        modalScope.roleModel = self.gridApiRoles.selection.getSelectedRows()[0];

            var modalInstance = $uibModal.open(
                templateUrl: 'views/dialog.html',
                scope: modalScope,
                windowTemplateUrl: 'template/flexModal.html',
                backdrop: 'static',

                resolve: 
                    roleModelScope: function () 
                      return modalScope.roleModel;
                    
                ,

                controller: ['$scope', '$rootScope', 'roleModelScope', DialogEditController],
                controllerAs: 'ctrl'
            );

            modalScope.modalInstance = modalInstance;

            modalInstance.result.then(
                function close(result) 
                    console.info(result);
                ,
                function dismiss() 
                    console.info("dialog dismissed");
                
            );
        
    ;

我的 UibModal 控制器：

let DialogEditController = function ($scope, $rootScope, roleModelScope) 

  let self = this;

  self.$onInit = () => 
    initTest();
  ;

  let initTest = () => 
    console.log(roleModelScope.name);
  ;
;

至此，roleModelScope.name 已完美传递给模态控制器。

我的模板：

<div class="modal-dialog" style="width:900px; height:750">
  <div class="modal-content">

    <div class="modal-header bg-info">
    </div>

    <div class="modal-body">
        roleModelScope.name
    </div>

    <div class="modal-footer">
    </div>

  </div>
</div>

我尝试使用 ctrl.roleModelScope，但也没有用。

感谢您的回答。

【参考方案1】：

在控制器this(context) 中分配一个roleModelScope 值，以便它可用于在视图上绑定。

此外，您的 Modal 控制器别名是 ctrl，尽管使用 roleModelScope.name，请使用 ctrl.roleModelScope.name。

<div class="modal-body">
    ctrl.roleModelScope.name
</div>

代码

let initTest = () => 
    this.roleModelScope = roleModelScope;
    console.log(roleModelScope.name);
;

【讨论】：

好吧，roleModelScope 是控制器模态范围。我想我需要提一下。无论如何，我尝试了您的解决方案，但没有成功。我也试过 ctrl.roleModelScope.name 没有更多成功。

@Piotr___ 你看到控制台的价值了吗？

@Piotr___ 请检查更新的答案..我的错..我错过了答案中的重要部分:(

你让我了解了更多关于“这个”的东西:-)。谢谢你。它几乎奏效了。我仍然不得不在 html 中提到 roleModelScope。就像这样： ctrl.roleModelScope.name;然后它就起作用了。

@Piotr___ 很高兴它有帮助，如果有帮助，请点赞。谢谢:)