要实现AngularJS自定义指令使用HTTP承诺与模板不绑定的功能,可以使用$compile
服务动态编译模板并手动链接到指令的作用域上。以下是一个示例解决方法:
HTML模板:
JavaScript代码:
angular.module('myApp', [])
.controller('myController', function($scope) {
// 在控制器中定义一个变量,用于存储异步请求的数据
$scope.data = {};
})
.directive('myDirective', function($compile, $http) {
return {
restrict: 'E',
scope: true,
link: function(scope, element) {
// 发送异步请求获取数据
$http.get('data.json').then(function(response) {
// 将异步请求的数据存储到指令的作用域中
scope.data = response.data;
// 加载模板
$http.get('template.html').then(function(response) {
// 动态编译模板并链接到指令的作用域上
var template = $compile(response.data)(scope);
element.replaceWith(template);
});
});
}
};
});
上述代码中,myDirective
指令会发送一个异步请求获取数据,并在获取到数据后加载模板。使用$compile
服务动态编译模板,并将编译后的模板链接到指令的作用域上。
请注意,上述代码中使用了两个HTTP请求,一个用于获取数据,另一个用于获取模板。你可以根据实际需求进行调整。