UI Bootstrap Modal的控制器出现问题

Question

我是Angular的新手。 我创建了一个带有模板（panel.html）和一个控制器（allPanelsRetrieved）的组件。 单击模板中定义的特定按钮时，将调用控制器中指定的showDetails（）函数。 此函数触发由模板（panel-list.details-template.html）和控制器指定的模态对话框的打开，这两个模板均在allPanelsRetrieved控制器中定义。 问题是显示了模式对话框，但控制器不起作用（单击“确定”按钮不执行任何操作）。 问题可能出在哪里？ 提前致谢

angular.
module('panelList')
.component('panelList', {
  templateUrl: '/panel-list/panel.html',
  controller: ['Panel', 'NgTableParams','$scope', '$location', '$uibModal',
   function PanelListController(Panel, NgTableParams, $scope, $location, $uibModal) {

  this.allPanelsRetrieved = (index, before) => {
  //..hidden code here  
  }

  this.showDetails = function () {
    $uibModal.open({
      templateUrl: '/panel-list/panel-list.details-template.html',
      controller: function ($uibModalInstance) {
        let $ctrl = this;
        $ctrl.ok = function () {
          $uibModalInstance.close();
        };
      },
    }).result.then(
      function (success) {
        alert(success);
      },
      function (error) {
        alert(error);
      }
    );
  };
 }]
});

这是模板panel-list.details-template.html：

<div>
<script type="text/ng-template" id="/panel-list/panel-list.details-template.html">
        <div class="modal-header">
            <h3 class="modal-title">Modal title</h3>
        </div>
        <div class="modal-body">
            Modal content
        </div>
        <div class="modal-footer">
            <button class="btn btn-primary" ng-click="$ctrl.ok()">Close</button>
        </div>
</script>

Answer 1

使用$scope使它以AngularJS方式工作。 这是您尝试实现的有效plnkr演示 。

$uibModal.open({
    templateUrl: '/panel-list/panel-list.details-template.html',
    controller: function ($uibModalInstance, $scope) {
        $scope.ok = function () {
            $uibModalInstance.close();
        };
    }
}).result.then(
    function (success) {
        alert(success);
    },
    function (error) {
        alert(error);
    }
);

视图

<script type="text/ng-template" id="/panel-list/panel-list.details-template.html">
  <div class="modal-header">
    <h3 class="modal-title">Modal title</h3>
  </div>
  <div class="modal-body">
    Modal content
  </div>
  <div class="modal-footer">
    <button class="btn btn-primary" ng-click="ok()">Close</button>
  </div>
</script>

Answer 2

虽然angular.component实现为controllerAs语法提供了默认值...

controllerAs: identifierForController(options.controller) || options.controllerAs || '$ctrl',

...看来，angular-ui-bootstrap没有。

只需在$ uibModal选项中为controllerAs提供一个值即可继续使用首选语法。

$uibModal.open({
  templateUrl: '/panel-list/panel-list.details-template.html',
  controllerAs: '$ctrl',
  controller: function($uibModalInstance) {
    let $ctrl = this;
    $ctrl.ok = function () {
      $uibModalInstance.close();
    }
  }

http://plnkr.co/edit/q1arN18553XoUZEuPcPl?p=preview

Answer 3

问题在于您正在使用该关键字。 请改用箭头功能，它将起作用：

$uibModal.open({
  templateUrl: '/panel-list/panel-list.details-template.html',
  controller: ($uibModalInstance) => {
    let $ctrl = this;
    $ctrl.ok = function () {
      $uibModalInstance.close();
    };
  },
})