javascript - UI Bootstrap Modal Controller 的问题

Question

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

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的方式工作。这是working plnkr demo您试图实现的目标。

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