如何通过角度 ui-grid 中来自$scope的数据动态设置指令
How to set directive dynamically by data from $scope in angular-ui-grid
对不起，我的英语很差...请不要笑，拜托...
在编译中，我不能使用$scope。当我通过硬代码设置指令（例如，"ui-grid-selection"）时，它可以完美地工作，就像在这里输入图像描述一样
在链接中，当我仅设置属性"ui-grid-selection"时，它不起作用。当我设置attr并编写$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)
我不知道如何解决它。难过我，请帮忙...
这是我的控制器代码：
'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);
}
}
});
}
}
}])
尝试在
运行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
相关文章：
- 将$scope数据传递给$stateProvider.state解析
- Angular JS(离子）数据数组到$scope元素
- Angular Service数据未在$scope中更新
- 工厂返回数据后未设置角度$scope
- 如何将数据从ASP.NET WebForms传递到Aurelia Global Scope
- 从HTML模板中的$http请求中检索的$scope访问更深层次的数据
- 如何通过AngularJS中的一个调用在多个控制器($scope）中插入相同的数据
- 从angularjs中的$scope在$http.post中发送动态数据
- 在 angularjs $scope中获取数据，同时从 django 获取数据
- 角度$scope在 HTML 中未显示正确的数据
- 在 DevExtreme Widgets 中使用存储在 $scope 中的数据
- 角度不显示$scope数据，ng 重复传入控制器.也没有错误
- 向 parse.com 发送数据并更新角度$scope
- 从 JSON 获取数据并将此元素添加到变量$scope
- 在 2 个不同的功能之间共享 $scope.数据
- 定义可能需要在AngularJS中修改$scope数据的实用程序/帮助程序方法的理想方式是什么
- 在AngularJs中从视图到工厂访问$scope数据
- $scope数据在angular的数组格式
- 仅当$scope数据发生变化时更新DOM
- 如何在使用$window.location更改位置后获得更新的($scope)数据
