각형 : 모달 버튼이 작동하지 않습니다. 변경 이벤트

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> 

을 그리고 마지막으로, 나는 ' 내가 you'r 올바르게 함수를 호출하지 참조

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을 열 때 우리는 그와 함께 범위를 통과해야한다. 그래서 몇 가지 코드를 수정했습니다.

컨트롤러에서 범위에 액세스하는 대신 $ 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(); 
       } 
      }