Angular-Formly：Modal按钮不能工作onChange事件

Question

我想弹出一个模式onChange事件的形式自定义复选框。莫代尔折返没关系，但不能使按钮的工作:(。我哪里做错了吗？

{ 
        key: 'coordinatesToLocateSite', 
        className: 'col-sm-8 col-md-8 col-lg-8', 
        type: 'custom_checkbox', 
        templateOptions: { 
         label: 'Use coordinates to locate site', 
         onChange: function($viewValue, $modelValue, scope) { 

          if ($viewValue === true) { 
           scope.modalInstance = scope.$uibModal.open({ 
            animation: true, 
            templateUrl: 'address_replace_coordinates_check.html'          
           }) 
          } 

          function check() { 
           if (scope.modalInstance) { 
            scope.modalInstance.close(); 
           } 
          } 

          scope.uncheck = function uncheck(keyName) { 
           $scope.model[keyName] = !$scope.model[keyName]; 
           if (scope.modalInstance) { 
            scope.modalInstance.close(); 
           } 
          } 
         }       
        }, 

        expressionProperties: { 
         'templateOptions.disabled': 'formState.disabled' 
        } 
       } 

在模板我的按钮，如下所示，

<div class="modal-footer"> 
     <button class="btn btn-warning" type="button" ng-click="check()">Ok</button> 
     <button class="btn btn-primary" type="button" ng-click="uncheck('coordinatesToLocateSite')">Cancel</button> 
    </div> 

最后，我已经试过以下为好。

formlyConfigProvider.setType({ 
      name: 'custom_checkbox', 
      templateUrl: 'bcsa_checkbox.html', 
      wrapper: ['bootstrapHasError'], 
      apiCheck: function apiCheck(check) { 
       return { 
        templateOptions: { 
         onChange: check.oneOfType([check.string, check.func]), 
         label: check.string 
        } 
       }; 
      }, 
      controller: /* @ngInject */ function($scope, $sce, $uibModal) { 
       'ngInject'; 
       $scope.$uibModal = $uibModal; 
       var markerOfRequired = '<span class="red"> \n<strong> \n* \n</strong> \n</span>'; 
       $scope.labelDisplay = $sce.trustAsHtml($scope.to.label + ($scope.to.required ? markerOfRequired : '')); 

       $scope.onChange = onChange; 
       $scope.check = check; 
       $scope.uncheck = uncheck; 

       function onChange($event) { 
        if (angular.isString($scope.to.onChange)) { 

         return $scope.$eval($scope.to.onChange, { $event: $event, $scope: $scope }); 

        } else { 

         return $scope.to.onChange($event, $scope); 
        } 
       } 

       function check() { 
        if (scope.modalInstance) { 
         scope.modalInstance.close(); 
        } 
       } 

       function uncheck(keyName) { 
        $scope.model[keyName] = !$scope.model[keyName]; 
        if (scope.modalInstance) { 
         scope.modalInstance.close(); 
        } 
       } 
      } 
     }); 

Answer 1

我不能让一个小提琴来测试，但阅读您的代码，我看找你不能正确调用函数时，应ng-click访问内部T标准的对象他$scope

所以尝试改变函数的声明本

  $scope.onChange = function ($event) { 
       if (angular.isString($scope.to.onChange)) { 

        return $scope.$eval($scope.to.onChange, { $event: $event, $scope: $scope }); 

       } else { 

        return $scope.to.onChange($event, $scope); 
       } 
      } 

      $scope.check = function() { 
       if (scope.modalInstance) { 
        scope.modalInstance.close(); 
       } 
      } 

      $scope.uncheck = function (keyName) { 
       $scope.model[keyName] = !$scope.model[keyName]; 
       if (scope.modalInstance) { 
        scope.modalInstance.close(); 
       } 
      } 

Answer 2

我弄明白，当我们打开$ uibModal我们应该沿着传递范围。所以，我修改了一些代码。

scope.modalInstance = scope.$uibModal.open({ 
           animation: true, 
           backdrop: false, 
           keyboard: false, 
           scope: scope,                          
           templateUrl: 'address_replace_coordinates_check.html' 
          }) 

在控制器中，不是访问作用域，而是访问它的$ parent。

$scope.check = check; 
$scope.uncheck = uncheck; 

function check() { 

       let modalInstance = this.$parent.modalInstance; 

       if (modalInstance) { 
        modalInstance.close(); 
       } 
      } 

function uncheck(keyName) { 

       let scope = this.$parent; 
       let modalInstance = scope.modalInstance; 

       scope.model[keyName] = !scope.model[keyName]; 

       if (modalInstance) { 
        modalInstance.close(); 
       } 
      }