Question

我正在使用http://ui-grid.info/docs/#/tutorial/205_row_editable中的示例代码来实现行可编辑的ui网格。

示例代码在我下载并在本地运行时工作正常，但是当我尝试在我们团队正在构建的较大项目中实现它时，它会抛出此错误：

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

以下是用于实现网格的模板：

<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>

控制器：

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";
    });
};
}

我不确定冲突发生在哪里。任何帮助将不胜感激。

Answer 1

我找到了错误的原因。在这种情况下，它不是因为重复命名的指令，而是因为这段代码被链接到全局app.js文件中的angular.module（＆＃39; app＆＃39;）：

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

这就是发生碰撞的地方。

希望这在某些方面可以帮助别人。检查全局设置！

AngularJS和ui-grid错误：要求新/隔离范围的多个指令

1 个答案: