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应该访问$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();
                }
            }

Angular-Formly：模态按钮不起作用onChange事件

2 个答案: