该值从未显示在DOM上，我只是想看看这种方式是否有效。
我想做的是在指令内创建一个新的作用域值，并将其显示给DOM
app.directive("rest", ["restFactory", function($rest){
return {
restrict: "A",
scope: {
uri: "@rest",
},
link: function(scope){
scope.$rest = [];
$rest.batch(scope.uri)
.then(function(data){
scope.$rest = data;
});
}
}
}]);
我试图显示的数据来自一个返回诺言的函数，并且随着诺言而来的是我想在DOM中使用的数据
HTML的编码如下：
<div rest="accounts">
<div ng-repeat="data in $rest">
{{data.id}}
</div>
</div>
这是我做过的第一个指令。
我做了这个小事，解释了为什么您的指令不起作用。
<div rest="accounts">
<!-- You can't access the directive variable $rest from here
The directives variables are only available on it's template. -->
<div ng-repeat="data in $rest">
{{data.id}}
</div>
</div>
这将起作用：
app.directive("restTwo", function() {
return {
restrict: "A",
scope: {},
// It will work. I put the template in here.
// You can only access the directive variables from it's template
template: '<div ng-repeat="data in $rest">{{data.id}}</div>',
link: function(scope, el, attr) {
console.log(attr.rest); // output = accounts
//data
scope.$rest = [{
'id': 1,
'name': 'John Doe'
}, {
'id': 2,
'name': 'Johana Doe'
}];
console.log(scope.$rest);
}
}
});
我建议您建立一个工厂，并在其中进行api调用：
app.factory('myFactory', function($http) {
// GET example
this.get = function(string) {
return $http({
method: 'GET',
url: 'https://api.github.com/search/repositories?q=' + string
});
}
// Your request here
this.yourRequest = function(uri) {
// return $rest.batch(uri);
}
return this;
});
在您的控制器中：
app.controller('MainCtrl', function($scope, myFactory) {
$scope.myData = [];
myFactory.get('tetris').then(function successCallback(response) {
// this callback will be called asynchronously
// when the response is available
$scope.myData = response.data.items;
}, function errorCallback(response) {
// called asynchronously if an error occurs
// or server returns response with an error status.
});
});
看法：
<div ng-repeat="data in myData">
{{data.id}}
</div>
如果您确实要为此使用指令（我不推荐）：
指令：
app.directive("restThree", function() {
return {
restrict: "A",
scope: {
'data': '='
},
link: function(scope, el, attr) {
//console.log(attr.rest); // output = accounts
//data
scope.$rest = [{
'id': 1,
'name': 'John Doe'
}, {
'id': 2,
'name': 'Johana Doe'
}];
scope.data = scope.$rest;
}
}
});
看法：
<div rest-three="accounts" data="directiveData">
<div ng-repeat="data in directiveData">
{{data.id}}
</div>
</div>
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句