UI Bootstrap Modal 控制器的问题答案

【问题标题】：Issue with the controller of a UI Bootstrap ModalUI Bootstrap Modal 控制器的问题
【发布时间】：2017-07-25 14:53:05
【问题描述】：

我是 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>

【问题讨论】：

能否添加panel-list.details-template.html的代码？
我刚刚加了

标签： javascript angularjs

【解决方案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>

【讨论】：

这是一个肮脏的工作，问题不在于是否使用范围
@Yaser 添加了一个工作示例，究竟什么是“脏工作区”？
我没有说它不起作用，它只是忽略了问题并使用范围来解决它，而不是理解它为什么不能按原样起作用
@Yaser 嗯m8，你需要了解AngularJS中的E2E绑定。 $ctrl 在您的 VIEW 中不可用，因为它没有通过双向数据绑定进行绑定。所以，ng-click="$ctrl.ok()" 永远不会被执行。这就是我们在 AngularJS 中使用 $scope 的原因，这是在 AngularJS 中处理 E2E 绑定的简洁方式。它不像你建议的那样“脏”。
我在这里浪费时间，你为什么认为他们从 angular2 中删除了范围，甚至在此之前他们添加了组件和 controllerAs？

【解决方案2】：

问题出在您使用此关键字时。改用箭头函数，它会起作用：

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

【讨论】：

您好 Yaser，很遗憾这不起作用。无论如何感谢您的帮助
您是否在模态本身中设置了controllerAs？ @Anto 以及出现了什么错误
我没有收到任何错误。单击关闭按钮不会执行任何操作
我会为你创建一个 plunker，只需几分钟
控制器不能是箭头。

【解决方案3】：

虽然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

【讨论】：