Question

我需要在角度ui-grid中编写自定义指令，我想在用户按某个特定列的“enter”时调用一个函数，但是我不允许在列上写一个自定义指令，我怎样才能实现这个功能????

我已经分享了下面的代码，我已经写了一个指令“输入”这个指令我希望包含在“公司”栏目中我希望我对这个问题很清楚。

var app = angular.module('app', ['ui.grid', 'ui.grid.edit', 'ui.grid.rowEdit', 'ui.grid.cellNav', 'ui.grid.resizeColumns']);
app.controller('MainCtrl', ['$scope', '$http', '$q', '$interval', function ($scope, $http, $q, $interval) {
  $scope.gridOptions = {
		  
		  enableFiltering: true,
		  enableCellEditOnFocus: true
  };

  $scope.gridOptions.columnDefs = [
    { name: 'firstname', enableCellEdit: true },
    { name: 'lastname', displayName: 'Name (editable)' },
    { name: 'company',},
    { name: 'employed', displayName: 'employe'},
 
  ];

  $scope.saveRow = function( rowEntity ) {
    // create a fake promise - normally you'd use the promise returned by $http or $resource
    var promise = $q.defer();
    $scope.gridApi.rowEdit.setSavePromise( $scope.gridApi.grid, rowEntity, promise.promise );
   
    // fake a delay of 3 seconds whilst the save occurs, return error if gender is "male"
    $interval( function() {
      if (rowEntity.lastname === 'irfan' ){
        promise.reject();
      } else {
        promise.resolve();
      }
    }, 3000, 1);
  }; 
  $scope.addData = function() {
	    var n = $scope.gridOptions.data.length + 1;
	    $scope.gridOptions.data.push({
	                "firstName":"",
	                "lastName": "",
	                "company": "",
	                "employed": true
	              });
	  };

  $scope.gridOptions.onRegisterApi = function(gridApi){
    //set gridApi on scope
    $scope.gridApi = gridApi;
    gridApi.rowEdit.on.saveRow($scope, $scope.saveRow);
  };

  var data1 = [
               {
                 "firstName": "Cox",
                 "lastName": "Carney",
                 "company": "Enormo",
                 "employed": true
               },
               {
                 "firstName": "Lorraine",
                 "lastName": "Wise",
                 "company": "Comveyer",
                 "employed": false
               },
               {
                 "firstName": "Nancy",
                 "lastName": "Waters",
                 "company": "Fuelton",
                 "employed": false
               },
               {
                 "firstName": "Misty",
                 "lastName": "Oneill",
                 "company": "Letpro",
                 "employed": false
               }
             ];
  $scope.gridOptions = {
		    data: data1
		  };
}]);
app.directive("enter", function () {
	  return function (scope, element, attrs) {
	    element.bind("click", function () {
	      scope.addData();
	    })
	  }})

@CHARSET "ISO-8859-1";
.grid {
  width: 950px;
  height: 600px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!doctype html>
<html ng-app="app">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-touch.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-animate.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
    <script src="http://ui-grid.info/release/ui-grid-unstable.js"></script>
    <link rel="stylesheet" href="http://ui-grid.info/release/ui-grid-unstable.css" type="text/css">
    <link rel="stylesheet" href="main.css" type="text/css">
  </head>
  <body>

<div ng-controller="MainCtrl">
<button type="button" id="addData" class="btn btn-success" ng-click="addData()">Add ROW</button>
  <div ui-grid="gridOptions" ui-grid-edit ui-grid-row-edit ui-grid-cellNav ui-grid-resize-columns ui-grid-cellNav class="grid"></div>
</div>

  <script src="workinggrid2.js"></script>
  
  </body>
</html>

我如何在angulargs ui-grid中编写自定义指令

0 个答案: