Editable row in Custom directive:

[praveen252elite]

Hi ,

I am trying to create a custom directive in the editable tabular row, it is throwing me the following error _> angular.min.js:124 TypeError: Cannot read property '$data' of null

at xeditable.min.js:6_

and editable text box is not appearing. Code:

(function(angular) {
'use strict';
var app = angular.module('app',  ["xeditable"]);
app.run(function(editableOptions) {
editableOptions.theme = 'bs3';
});

app.controller('Ctrl', ['$scope', function($scope) { $scope.Trades = [{ name:"Praveen", Comments: 'Hello' },{ name:"tadikonda", Comments: 'how areyou' }];

$scope.columns = [{name:'user',data:'row.name'},{name:'Comments',data:'row.Comments'}]

}]) .directive('editableTradeComments', function() { return { restrict: 'E', scope :{ eName:"@", eForm:"@", row:"=" }, template: '{{row.Comments}}', link: function (scope, element, attrs) { scope.getCellIcon = function (cellValue) {

            if (!cellValue) {

                return "fa fa-exclamation-triangle text-danger";
            } else {

                return '';
            }
        }
    } 
  }
});

})(window.angular);

HTML:

with directive

User	Comments	Edit

``` Please find the plunker link: https://plnkr.co/edit/mDWG94kajAf1JVGzGnaG?p=preview

[ckosloski]

It looks like a scope issue. I changed it to scope=false and that seemed to fix the issue https://plnkr.co/edit/1772aosu2bY7O4a4IlVG?p=preview

[praveen252elite]

thank you !!