如何通过 angular-ui-grid 中 $scope 的数据动态设置指令

Question

对不起我的英语很差...请不要笑...

在编译中，我不能使用$scope。当我通过硬代码设置指令（例如，'ui-grid-selection'）时，它像 enter image description here

一样完美地工作

在link中，当我只设置属性'ui-grid-selection'时，它不起作用。当我设置 attr 并写入 $compile($element.find('.mygrid'))($scope) 时，它可以工作，但只有功能是正确的，它的布局变得像 this 并且控制台日志显示：

    Error: [ngTransclude:orphan] http://errors.angularjs.org/1.3.20/ngTransclude/orphan?p0=%3Cdiv%20ng-transclude%3D%22%22%3E
    at Error (native)
    at http://localhost:8000/bower_components/angular/angular.min.js:6:417
    at Ia.link (http://localhost:8000/bower_components/angular/angular.min.js:239:272)
    at Z (http://localhost:8000/bower_components/angular/angular.min.js:70:149)
    at I (http://localhost:8000/bower_components/angular/angular.min.js:59:255)
    at g (http://localhost:8000/bower_components/angular/angular.min.js:51:335)
    at g (http://localhost:8000/bower_components/angular/angular.min.js:51:352)
    at http://localhost:8000/bower_components/angular/angular.min.js:50:444
    at http://localhost:8000/bower_components/angular/angular.min.js:52:322
    at h (http://localhost:8000/bower_components/angular/angular.min.js:56:322) <div ng-transclude="">
Error: [$compile:ctreq] http://errors.angularjs.org/1.3.20/$compile/ctreq?p0=uiGrid&p1=uiGridHeaderCell
    at Error (native)
    at http://localhost:8000/bower_components/angular/angular.min.js:6:417
    at M (http://localhost:8000/bower_components/angular/angular.min.js:56:127)
    at http://localhost:8000/bower_components/angular/angular.min.js:56:193
    at r (http://localhost:8000/bower_components/angular/angular.min.js:7:322)
    at M (http://localhost:8000/bower_components/angular/angular.min.js:56:170)
    at I (http://localhost:8000/bower_components/angular/angular.min.js:59:104)
    at g (http://localhost:8000/bower_components/angular/angular.min.js:51:335)
    at http://localhost:8000/bower_components/angular/angular.min.js:50:444
    at http://localhost:8000/bower_components/angular/angular.min.js:52:322
Error: [$compile:ctreq] http://errors.angularjs.org/1.3.20/$compile/ctreq?p0=uiGrid&p1=uiGridRow
    at Error (native)
    at http://localhost:8000/bower_components/angular/angular.min.js:6:417
    at M (http://localhost:8000/bower_components/angular/angular.min.js:56:127)
    at http://localhost:8000/bower_components/angular/angular.min.js:56:193
    at r (http://localhost:8000/bower_components/angular/angular.min.js:7:322)
    at M (http://localhost:8000/bower_components/angular/angular.min.js:56:170)
    at I (http://localhost:8000/bower_components/angular/angular.min.js:59:104)
    at g (http://localhost:8000/bower_components/angular/angular.min.js:51:335)
    at I (http://localhost:8000/bower_components/angular/angular.min.js:59:199)
    at g (http://localhost:8000/bower_components/angular/angular.min.js:51:335)
Error: [$compile:ctreq] http://errors.angularjs.org/1.3.20/$compile/ctreq?p0=uiGrid&p1=uiGridRow
    at Error (native)
    at http://localhost:8000/bower_components/angular/angular.min.js:6:417
    at M (http://localhost:8000/bower_components/angular/angular.min.js:56:127)
    at http://localhost:8000/bower_components/angular/angular.min.js:56:193
    at r (http://localhost:8000/bower_components/angular/angular.min.js:7:322)
    at M (http://localhost:8000/bower_components/angular/angular.min.js:56:170)
    at I (http://localhost:8000/bower_components/angular/angular.min.js:59:104)
    at g (http://localhost:8000/bower_components/angular/angular.min.js:51:335)
    at I (http://localhost:8000/bower_components/angular/angular.min.js:59:199)
    at g (http://localhost:8000/bower_components/angular/angular.min.js:51:335)

我不知道如何修复it.Sad我，请帮助...

这里是我的控制器代码：

'use strict';

app.controller('mainCtrl',
  ['$scope', '$q', '$http', 'uiGridTreeViewConstants', function ($scope, $q, $http, uiGridTreeViewConstants) {

  $scope.gridOptions1 = {
    onRegisterApi: function( gridApi ) {
      $scope.grid1Api = gridApi;
    }
  };

  $http.get('demo/data/uigrid_100.json').success(function(data) {
    $scope.gridOptions1 = data.gridOptions;
    $scope.gridEnable1 = data.gridEnable;
    $scope.gridOptions1.data = data.gridData;
  });

}]);

app.directive('jsonUiGrid', ['$compile', function($compile) {
  return {
    restrict: 'E',
    template:
      '<div>' +
        '<div ui-grid="options" class="mygrid"></div>' +
      '</div>'
    ,
    replace: true,
    transclude: true,
    scope: {
      options: '=?',
      enablesData: '=enables'
    },
    link: function($scope, $element, attrs){
      $scope.$watch('enablesData', function(newValue) {
        if (typeof(newValue) != 'undefined'){
          if(newValue && newValue.length){
            angular.forEach(newValue, function(attr){
              $element.find('.mygrid').attr(attr, '');
            });
            $compile($element.find('.mygrid'))($scope);
          }
        }
      });
    }
  }
}])

Answer 1

尝试在运行 mainCtrl 之前使用 $http 获取数据，并注入 mainCtrl。有效！！

详情是。我正在使用一个名为 "Clip-Two_130" 的模板，它在 "config.router.js" 中包含一个名为 "loadSequence".

的函数

function loadSequence() {
    var _args = arguments;
    return {
        deps: ['$ocLazyLoad', '$q',
        function ($ocLL, $q) {
            var promise = $q.when(1);
            for (var i = 0, len = _args.length; i < len; i++) {
                promise = promiseThen(_args[i]);
            }
            return promise;

            function promiseThen(_arg) {
                if (typeof _arg == 'function')
                    return promise.then(_arg);
                else
                    return promise.then(function () {
                        var nowLoad = requiredData(_arg);
                        if (!nowLoad)
                            return $.error('Route resolve: Bad resource name [' + _arg + ']');
                        return $ocLL.load(nowLoad);
                    });
            }

            function requiredData(name) {
                if (jsRequires.modules)
                    for (var m in jsRequires.modules)
                        if (jsRequires.modules[m].name && jsRequires.modules[m].name === name)
                            return jsRequires.modules[m];
                return jsRequires.scripts && jsRequires.scripts[name];
            }
        }]
    };
}

我把路由器设置成：

.state('app.demo_ui-grid2', {
    url: "/demo_ui-grid2",
    templateUrl: "demo/views/demo_ui-grid2.html",
    //resolve: loadSequence('ui.grid', 'ui.grid.selection', 'demoUiGridCtrl2'),
    resolve: {
        deps: loadSequence('ui.grid', 'ui.grid.selection', 'demoUiGridCtrl2').deps,
        options: function($q, $http){
            var deferred = $q.defer();
            $http.get('demo/data/uigrid_options.json').then(function(data) {
                deferred.resolve(data.data);
            });
            return deferred.promise;
        }
    },
    controller: 'mainCtrl',
    title: 'demo_ui-grid2',
    ncyBreadcrumb: {
        label: 'demo ui-grid2'
    }
})

控制器文件已修改为：

    'use strict';


app.controller('mainCtrl',
  ['$scope', '$q', '$http', 'options', 'uiGridConstants', 'uiGridData',
      function ($scope, $q, $http, options, uiGridConstants, uiGridData) {

  // Bind grid enable
  $scope.gridEnable1 = options.gridEnable;

  // Bind grid options
  $scope.gridOptions1 = options.gridOptions;
  $scope.gridOptions1.onRegisterApi = function(gridApi){
    $scope.grid1Api = gridApi;
  };

  // Bind grid data [NO NECESSARY]
  //$scope.gridOptions1.data = data;

  $scope.url = [
    'demo/data/100.json',
    'demo/data/500_complex.json'
  ];


  $scope.changeData = function(url){
    var promise = uiGridData.get(url);
    promise.then(function(data) {
        $scope.gridOptions1.data = data;
    }, function(data) {
        console.log('changeData ERROR');
    });
  }

}]);


app.factory('uiGridData', ['$http', '$q', function ($http, $q) {
  return {
    get: function(url) {
      var deferred = $q.defer();
      $http({method: 'GET', url: url}).
        success(function(data, status, headers, config) {
          deferred.resolve(data);
        }).
        error(function(data, status, headers, config) {
          deferred.reject(data);
        });
      return deferred.promise;
    } // end get
  };
}]);


app.directive('jsonUiGrid', ['$compile', function($compile) {
  return {
    restrict: 'E',
    template:
      '<div>' +
        '<div ui-grid="options" class="mygrid"></div>' +
      '</div>'
    ,
    replace: true,
    transclude: true,
    scope: {
      options: '=?',
      enablesData: '=enables'
    },
    link: function($scope, $element, attrs){
      angular.forEach($scope.enablesData, function(attr){
        $element.find('.mygrid').attr(attr, '');
      })

      $element.html($element.html());
      $compile($element.contents())($scope);
    }
  }
}])

也许我只能修改控制器文件而不修改路由器文件？

希望有更好的解决方案。仍然需要帮助。

您可以使用的数据文件：

100.json

500_complex.json

如何通过 angular-ui-grid 中 $scope 的数据动态设置指令

How to set directive dynamically by data from $scope in angular-ui-grid

javascript

jquery

angularjs

angular-ui-grid