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

Question

我在我的一个控制器中使用 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 但它也没有用。

感谢您的回答。

Answer 1

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

此外，您的 Modal 控制器别名是 ctrl，请使用 {{ctrl.roleModelScope.name}} 而不是 {{roleModelScope.name}}。

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

代码

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

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

binding template view with uibmodal controller

modalviewcontroller

angularjs