Question

请参阅plunker - https://plnkr.co/edit/Kl5smDzNPm9edDBa3Fai?p=preview

按钮Delete1适用于带有onClick事件的内联警报。我正在尝试使用grid.appscope对其余的按钮进行ng-click，使用不同的选项，但它们不起作用。你知道我错过了吗？

//代码

    /* global angular */
    (function() {

      'use strict';
      console.clear()

      var app = angular.module('formlyExample', ['formly', 'formlyBootstrap', 'ui.bootstrap', 'ui.grid.autoResize', 'ui.grid.pagination', 'ui.grid.selection', 'ui.grid.edit', 'ui.grid.rowEdit']);

      app.run(function(formlyConfig) {
        formlyConfig.setType({
          name: 'ui-grid',
          template: '<div ui-grid="{ data: model[options.key], columnDefs: to.columnDefs, onRegisterApi: to.onRegisterApi}" ui-grid-auto-resize ui-grid-pagination ui-grid-selection ui-grid-edit ui-grid-row-edit ></div>',
          wrapper: ['bootstrapLabel', 'bootstrapHasError']
        });
      });


      app.controller('MainCtrl', function MainCtrl($scope, $rootScope, formlyVersion) {
        var vm = this;
        // funcation assignment
        vm.onSubmit = onSubmit;

        // variable assignment
        vm.author = { // optionally fill in your info below :-)
          name: 'Benjamin Orozco',
          url: 'https://github.com/benoror'
        };
        vm.exampleTitle = 'UI Grid'; // add this
        vm.env = {
          angularVersion: angular.version.full,
          formlyVersion: formlyVersion
        };
        vm.deleteRow2 = function() {
          alert(2);
        }

        $scope.deleteRow3 = function() {
          alert(3);
        }

        $rootScope.deleteRow4 = function() {
          alert(4);
        }

        var columnDefs;
        columnDefs = [{
            name: 'State',
            field: 'name'
          }, {
            name: 'Abbr',
            field: 'abbr'
          }, {
            name: 'Delete1',
            cellTemplate: '<button type="button" onClick="alert(1)">Click Me!</button>'
          }, {
            name: 'Delete2',
            cellTemplate: '<button type="button" ng-click="grid.appScope.deleteRow2()">Click Me!</button>'
          }, {
            name: 'Delete3',
            cellTemplate: '<button type="button" ng-click="grid.appScope.deleteRow3()">Click Me!</button>'
          }, {
            name: 'Delete4',
            cellTemplate: '<button type="button" ng-click="grid.appScope.deleteRow4()">Click Me!</button>'
          }




        ];

        vm.model = {
          list: [{
            "name": "Alabama",
            "abbr": "AL"
          }, {
            "name": "Alaska",
            "abbr": "AK"
          }, {
            "name": "American Samoa",
            "abbr": "AS"
          }, {
            "name": "Arizona",
            "abbr": "AZ"
          }, {
            "name": "Arkansas",
            "abbr": "AR"
          }, {
            "name": "California",
            "abbr": "CA"
          }, {
            "name": "Colorado",
            "abbr": "CO"
          }, {
            "name": "Connecticut",
            "abbr": "CT"
          }]
        };
        vm.options = {
          formState: {
            uiGridCtrl: function($scope) {
              $scope.to.onRegisterApi = function(gridApi) {
                vm.gridApi = gridApi;
              };
            }
          }
        };


        vm.fields = [{
          key: 'list',
          type: 'ui-grid',
          templateOptions: {
            label: 'Simple UI Grid',
            columnDefs: columnDefs,
            onRegisterApi: ''
          },
          controller: 'formState.uiGridCtrl'
        }];

        vm.originalFields = angular.copy(vm.fields);

        // function definition
        function onSubmit() {
          vm.options.updateInitialValue();
          alert(JSON.stringify(vm.model), null, 2);
        }
      });

    })();

由于

Answer 1

我认为问题在这里：

app.run(function(formlyConfig) {
formlyConfig.setType({
  name: 'ui-grid',
  template: '<div ui-grid="{ data: model[options.key], columnDefs: to.columnDefs, onRegisterApi: to.onRegisterApi}" ui-grid-auto-resize ui-grid-pagination ui-grid-selection ui-grid-edit ui-grid-row-edit ></div>',
  wrapper: ['bootstrapLabel', 'bootstrapHasError']
});

}）;

因为这个样本工作正常： http://ui-grid.info/docs/#/tutorial/305_appScope

http://plnkr.co/edit/0uXsSmruve6QYOJThNPP?p=preview

使用具有角度形状的ui网格。行单元格中的按钮不会调用控制器中作用域上定义的方法

1 个答案: