如何从 ui-modal AngularJS 调用父函数？答案

【问题标题】：How can I call a parent function from ui-modal AngularJS?如何从 ui-modal AngularJS 调用父函数？
【发布时间】：2020-05-18 01:05:58
【问题描述】：

这是我的模态函数：

$uibModal.open({
   templateUrl: config.baseUrl + '/ClientApp/Views/Modals/userEditModal.html' + config.scriptVersion,
   size: size,
   scope: $scope,
   controller: function ($scope, $uibModalInstance) {                
     $scope.cancel = function () {
       $uibModalInstance.close();
     };
   }
}).result.catch(function (resp) {           
   if (['cancel', 'backdrop click', 'escape key press'].indexOf(resp) === -1) {
     throw resp;
   }
})

这个$uibModal 在我有其他$scope 变量和函数的控制器内。如果我在带有父范围对象的模态中执行ng-repeat，则ng-repeat 有效！但是如果我调用一个函数 ex。 doSomething() 或尝试在 ng-class 中使用范围对象，例如。 ng-class="{'css': doSomething()}" - 没有。如您所见，我将$scope 分配给模态中的范围属性。我究竟做错了什么？我还尝试使用$parent 调用该函数，但仍然无法正常工作。 ng-if="$parent.doSomething()"

【问题讨论】：

标签： angularjs angular-ui-bootstrap angular-ui-modal

【解决方案1】：

在定义 modal 时只使用对已经存在的函数的引用呢？ bind a property to your controller's scope 并将其传递给您的模态。

bindToController: true,
controllerAs: 'parent'

那就直接传doSomething

function myController($uibModal) {

    var parent = this;
    parent.doSomething = function() {
        /** does something ... **/
    };

    $uibModal.open({
       templateUrl: config.baseUrl + '/ClientApp/Views/Modals/userEditModal.html' + config.scriptVersion,
       size: size,
       scope: $scope,
       controller: function ($scope, $uibModalInstance) {  

         $scope.doSomethingDelegate = parent.doSomething;

         // ... more stuff
       }
    })
}

然后在你的模态模板中

<element ng-if="doSomethingDelegate()"></element>

【讨论】：