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
– Walfrat, Commented Jun 27, 2016 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
– JMax2012, Commented Jun 27, 2016 at 15:15

JMax2012 · Accepted Answer · 2016-06-27 17:59:25Z

1

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!

answered Jun 27, 2016 at 17:59

JMax2012

3732 gold badges6 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related