错误 'uiGrid' 必须只有一个根元素。 ui-grid/ui-grid 当 UI-网格启动时

Question

在尝试将 ui-grid 添加到 angular 项目时，我遇到了这个问题。

我已经启动了 angel;ar 应用程序，其中注入了 ui-grid 依赖项。

    var app = angular.module(‘myApp’,     
    ['ui.bootstrap',     
     'services',     
     'filters',         
     'directives',         
     'controllers',         
     'ui.grid'     
    ]);

控制器看起来像这样。

   angular.module('controllers').controller('UIGridCtrl',function      UIGridCtrl($scope) {  
  $scope.init = function(){         
      $scope.myData = [             
        {"firstName": "Cox",
          "lastName": "Carney",
          "company": "Enormo", 
          "employed": true             
         } ];     
       };
    });

观点是

    <div ng-controller="UIGridCtrl">
         <div id="grid1" ui-grid="{data: myData}" class="grid"></div>  
    </div>

由于使用了 grunt，我也在我的索引模板中添加了 ui-grid 依赖项。

<!-- include: "type": "css", "files": "javascripts/library/uiGrid/ui-grid-stable.css" -->
<!-- include: "type": "js", "files": "javascripts/library/uiGrid/ui-grid-stable.js"  -->

当我尝试访问我的视图时，出现此错误。

错误：[$compile:tplrt] 指令模板 'uiGrid' 必须只有一个根元素。 ui-grid/ui-grid.

除此之外，还有一个对此 url 的网络调用。

http://localhost:PORT/ui-grid/ui-grid 这是无效的 url。不确定是什么问题。有什么建议吗？

Answer 1

我的问题与奇怪的 HTTP 拦截有关。添加 ui-grid 时，它触发了对 http://localhost:xxxx/ng-grid/ng-grid 的 get 请求，这会破坏网格并引发错误。（'uiGrid' 必须只有一个根元素。ui-grid/ui-grid）添加了一个拦截器规则以忽略 url 格式，然后网格开始正常渲染。

Answer 2

如果您使用的是 http 拦截器，请省略带有 ui-grid 的 url，这样可以清除此错误。

下面是我最终的工作代码

(function() {
    angular.module('myapp').config(myHttpProvider);
})();



function appHttpInterceptor($q, $injector) {
    return {
        // optional method
        'request': function(config) {
            // do something on success
             if ((config.url.indexOf('tpl.html') === -1) && 
             (config.url.indexOf('tabler-icons') === -1) && (config.url.indexOf('ui-grid/') === -1)) {
                config.url = window.APP.api + config.url;
            }
            return config;
        },

        // optional method
        'requestError': function(rejection) {
            // do something on error
            return $q.reject(rejection);
        },

        // optional method
        'response': function(response) {
            // do something on success
            if (response.config.url.indexOf('ui-grid/') !== -1) {
                return response;
            }
            if (response.config.url.indexOf('tpl.html') !== -1) {
                return response;
            }
            if (response.config.url.indexOf('tpl.html') !== -1) {
                return response;
            }
            if (response.config.url.indexOf('tabler-icons') !== -1) {
                return response;
            }
            const data = response.data;
            
            if(data.message){
                const toastService = $injector.get('ToastService');
                toastService.success(data.message);
            }
            if (data.redirect) {
                window.location.href = data.redirect;
            }
            return data;
        },

        // optional method
        'responseError': function(rejection) {
            // do something on error
            let data = rejection.data;
            let errors = [data.message];
            if (data.errors) {
                const errorValues = Object.values(data.errors);
                if (errorValues.length) {
                    errors = [];
                    _.forEach(errorValues, function(error) {
                        errors = errors.concat(error)
                    });
                }
            }
    const toastService = $injector.get('ToastService');
            toastService.error(errors[0]);
            return $q.reject(errors);
        }
    };
}

function myHttpProvider($httpProvider) {
    $httpProvider.interceptors.push(appHttpInterceptor);
}

myHttpProvider.$inject = ['$httpProvider'];
appHttpInterceptor.$inject = ['$q', '$injector'];

config.url.indexOf('ui-grid/') !== -1 是关键。

错误 'uiGrid' 必须只有一个根元素。 ui-grid/ui-grid 当 UI-网格启动时

Error 'uiGrid' must have exactly one root element. ui-grid/ui-grid when UI-Grid is initiated

angularjs

gruntjs

ng-grid

angular-ui-grid