AngularJS and ui-grid error: Multiple directives asking for new/isolated scope

Question

I'm using the sample code from http://ui-grid.info/docs/#/tutorial/205_row_editable to implement a row-editable ui grid.

The sample code works fine when I download it and run it locally, but it throws this error when I try to implement it within the larger project our team is building:

angular.js:12330 Error: [$compile:multidir] Multiple directives 
[input (module: app), uiGridEditor] asking for new/isolated scope on: 
<input type="text" ng-class="'colt' + col.uid" ui-grid-editor="" 
ng-model="row.entity['Brand']" class="ng-pristine ng-untouched ng-valid">...

at angular.js:68
at assertNoDuplicate (angular.js:8424)
at applyDirectivesToNode (angular.js:7803)
at compileNodes (angular.js:7459)
at compileNodes (angular.js:7471)
at compileNodes (angular.js:7471)
at compile (angular.js:7366)
at createEditor (ui-grid.js:16223)
at beginEditAfterScroll (ui-grid.js:16230)
at ui-grid.js:16029

Here is the template used to implement the grid:

<div class="row">
        <div class="ibox-content" ng-controller="myEditController">
            <div ui-grid="gridOptions" ui-grid-edit ui-grid-row-edit ui-grid-cellNav 
class="grid"></div>
        </div>
    </div>

And the controller:

angular
.module('app')
.controller('myEditController', myEditController);

function myEditController($scope, $http, $cookies, $location, $rootScope, $timeout, $interval, $state, $q, myService) {
var model = this;
var myData = {};

$scope.gridOptions = {};

$scope.gridOptions.columnDefs = [
  { name: 'Name', enableCellEdit: true },
  { name: 'Brand', enableCellEdit: true },
  { name: 'Season', enableCellEdit: true },
 { name: 'Season', enableCellEdit: true }
];

$scope.saveEdits = function (rowEntity) {

    alert(rowEntity);
};

$scope.gridOptions.onRegisterApi = function (gridApi) {
    //set gridApi on scope
    $scope.gridApi = gridApi;
    gridApi.rowEdit.on.saveRow($scope, $scope.saveEdits);
};

get();

function get() {
    myService.getList().then(function (response) {
        if (response) {
            myData = response;
            $scope.gridOptions.data = myData;
        }
        else {
            model.isError = true;
            model.errorMessage = "No data Found";
        }

    },
    function (error, status) {
        model.isError = true;
        model.errorMessage = "There was an error retrieving data. Please contact the system administrator";
    });
};
}

I'm not sure where the conflict is happening. Any help would be appreciated.

blind guess : change input to a simple div element. If you need an input to bind validity to your form, create an hidden input that will have the same ng-model than your grid. — Walfrat, Jun 27 '16 at 14:47
Not sure what you mean, I guess. The grid is already in a div element. Unless you're referring to the error message that mentions "input type=text," but I don't control that, it's handled within the ui-grid.js file. I need to figure out how I have multiple directives making a claim on the same item at once. — JMax2012, Jun 27 '16 at 15:15

score 1 · Answer 1 · answered Jun 27 '16 at 17:59

I found the cause of the error. In this case it was not because of a duplicate-named directive, it was because this bit of code was chained to angular.module('app') in the global app.js file:

.directive('input', function () {
    return {
        restrict: 'E',
        scope: {},
        ...
        //code to check for changes in textbox value

So that's where the collision was taking place.

Hopefully this helps somebody else at some point. Check the global settings!

AngularJS and ui-grid error: Multiple directives asking for new/isolated scope

1 Answers1