使用angularJS的模态对话框

时间:2018-10-25 15:12:02

标签: javascript angularjs modal-dialog

我想在AngularJS中进行模态对话框。 我使用了一些角度,但通过大量的研究,我无法找到一种方法。 当我调用函数(impuestos.view.html)时,这就是我的html:

div class="col-sm-12 margin-top-10">
    <button type="button" class="btn btn-info btn-sm" ng-click="$ctrl.anadirImpuesto()">A&ntilde;adir impuesto</button>
</div>      

js(impuestos.componente.js):

var impuestosComponent = {
        template: '<div ng-include="$ctrl.loadTemplate()"></div>',
        controllerAs: '$ctrl',
        $inject: ['$routeParams','$filter','$mdDialog','BASE_SRC'],
        require: {
            parent:'^pleyadeApp'
        }
    };
    impuestosComponent.controller = function impuestosComponentController(routeParams, filter, $mdDialog, BASE_SRC) {

        var vm = this;

        vm.modalShown = false;

        vm.anadirImpuesto = function() {
            vm.modalShown = !vm.modalShown;
        };

        this.$onInit = function() {   
            vm.param = routeParams.param;
        }

        this.loadTemplate = function() {
            return 'src/flotas/impuestos/impuestos.view.html';
        }

        this.$onChanges = function(){
            vm.gridOptions.data = vm.lista;
        }

        this.$doCheck = function() {
            if(vm.gridApi != undefined)
                vm.gridApi.core.resfresh;
        }

        vm.anadirImpuesto=function(ev){
            $mdDialog.show({
                templateUrl: BASE_SRC+'flotas/impuestos/impuesto.modal/tarc.modal.html',
                controllerAs: '$ctrl',
                clickOutsideToClose:true,
                parent: angular.element(document.body),
                targetEvent: ev,
                fullscreen:false,
                controller:['$mdDialog', function($mdDialog){
                    var md = this;

                    md.hide = function() {
                      $mdDialog.hide();
                    };

                    md.cancel = function() {
                      $mdDialog.cancel();
                    };

                    md.answer = function(answer) {
                      $mdDialog.hide(answer);
                    };

                }]
            })
        }

    }

和模态(tarc.modal.html):

<md-dialog style="width:45%">
    <md-toolbar style="background-color: #2593B5; min-height:44px;">
        <div class="md-toolbar-tools" style="height:44px">
            <h2>Nuevo impuesto</h2>
            <md-button class="md-icon-button" ng-click="$ctrl.cancel()" style="right:20px; position:absolute">
              <md-icon aria-label="Close dialog">clear</md-icon>
            </md-button>
        </div>
    </md-toolbar>
    <ng-dialog-content>
        <div class="md-dialog-content">
            <form ng-submit="" class="formClass formCliente" name="newImpuesto" role="form">
                <div class="margin-top-20" style="text-align: center">
                    <md-button type="submit" class="dark-blue">Nuevo impuesto</md-button>
                    <md-button ng-click="$ctrl.cerrar()" class="medium-orange">Cancelar</md-button>
                </div>
            </form>
<!--            <div class="ui-grid grid-modal" ui-grid="$ctrl.gridClienteHistoricos" ui-grid-pagination></div> -->
        </div>
    </ng-dialog-content>
</md-dialog>

当我按下模式按钮时,出现此错误:

Error: [$parse:lexerr]

希望您能为我提供帮助,因为正如我之前所说,我对角度的控制并不多,谢谢!

0 个答案:

没有答案
相关问题