Question

抱歉，我的英语很差......请不要笑，请...

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

一样工作

在链接中，当我仅设置属性'ui-grid-selection'时，它不起作用。当我设置if( $rows = oci_fetch_array($query)并编写attr时，它可以工作，但只有函数是正确的，它的布局变得像this，控制台日志显示：

$compile($element.find('.mygrid'))($scope)

我不知道如何解决它。请给我，请帮助......

这是我的控制器代码：

    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)

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的数据动态设置指令

1 个答案: