[英]get data immediately in angularjs using $http or $resource
i created a plug-in for field我为字段创建了一个插件
angular.module('ersProfileForm').directive('ersProfileEditableField', ['$templateCache', '$compile', 'profileFieldService', 'RolesService',
function($templateCache, $compile, profileFieldService , RolesService){
return {
restrict: 'AE',
templateUrl: '',
scope: {
ersProfileEditableField: '=',
ersProfileSectionData: '=',
ersProfileEditableFieldValue: '=',
ersBulkEdit: '<'
},
controller: ['$scope', '$http','$q','$resource', function($scope, $http, $q, $resource){
$http.get('rest/roles',{}).then(function(response){
$scope.roles = response.data;
});
}],
link: function(scope, iElement, iAttrs, controller){
iElement.append(jQuery(profileFieldService.getTemplate(scope.ersProfileEditableField.type, scope)));
$compile(iElement.contents())(scope);
}
};
}]);
roles data will be used in this template角色数据将在此模板中使用
angular.module('ersProfileForm').factory('profileFieldService', ['$resource', function($resource){
var factory = {};
factory.getTemplate = function(type, scope){
scope.field = scope.ersProfileEditableField;
var tpl = '<div ng-repeat ="role in roles"'>
+' <label>{{role.name</label>'
+' </div>'
break;
return tpl;
};
return factory;
}]);
i want roles array in this template but service is taking time so roles is not defined in template it is executing after some time我想要这个模板中的角色数组但是服务需要时间所以角色没有在模板中定义它在一段时间后执行
my question is that i want roles data from the request only then go to template which is defined in link?我的问题是我想要来自请求的角色数据,然后才转到链接中定义的模板?
试试var tpl = '<div ng-repeat ="role in roles" ng-show="roles&&(roles.length>0)"> '+' <label>role.name</label>' +' </div>'
Did you tried using the $q promise object ?您是否尝试过使用 $q 承诺对象? resolve it in your $http method, then use it with .then :) Here is a link from the docs : https://docs.angularjs.org/api/ng/service/ $q
在您的 $http 方法中解决它,然后将它与 .then 一起使用 :) 这是来自文档的链接: https : //docs.angularjs.org/api/ng/service/ $q
The template needs double curly brackets {{ }}
to bind data to the DOM:模板需要双大括号
{{ }}
将数据绑定到 DOM:
factory.getTemplate = function(type, scope){
scope.field = scope.ersProfileEditableField;
var tpl = '<div ng-repeat ="role in roles"'>
// +' <label>role.name</label>'
// USE {{ }} for interpolation
+' <label>{{role.name}}</label>'
+' </div>'
return tpl;
};
The compile can be delayed by using a watcher:可以使用观察器延迟编译:
link: function(scope, iElement, iAttrs, controller){
scope.$watch("::roles", function (newValue) {
if (newValue) {
iElement.append(
profileFieldService
.getTemplate(scope.ersProfileEditableField.type, scope)
);
$compile(iElement.contents())(scope);
};
});
}
The watcher waits for the roles
data that is fetched from the server before doing the compile.在进行编译之前,观察者等待从服务器获取的
roles
数据。 It uses a one-time binding so that the compile is performed only once but the ng-repeat
directive will continue to update the DOM as the value of roles
changes.它使用一次性绑定,因此编译只执行一次,但
ng-repeat
指令将随着roles
值的变化继续更新 DOM。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.