I have the following app with directive:
(function() {
var app = angular.module('myFeed', []);
app.directive("feedList", function(){
console.log('in feed list directive');
return {
restrict: 'E',
templateUrl: "/static/angular/phone-list/feed-list.template.html",
cotrollerAs: 'myController',
controller: function($http){
var data = $.param({
grant_type: 'password',
username: 'test',
password: 'test',
client_id:'test',
client_secret:'test',
});
var config = {
headers : {
'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8;'
}
}
$http.post('/o/token/', data, config)
.success(function (data, status, headers, config) {
access_token = data['access_token'];
console.log(access_token);
$http({method: 'GET', url: 'api/posts/', headers: {'Authorization': 'Bearer '+access_token}}).then(function(response) {
this.posts = response.data;
});
})
.error(function (data, status, header, config) {
$scope.ResponseDetails = "Data: " + data +
"<hr />status: " + status +
"<hr />headers: " + header +
"<hr />config: " + config;
});
var header = {
headers : {
'Authorization': 'Bearer '+self.access_token
}
}
},
}
});
})();
My directive in index.html looks like this:
<feed-list></feed-list>
The template looks like this:
<li ng-repeat="post in myController.posts>{{post}}</li>
How can I get the <feed-list>
to display the posts set in this.posts
?
The scope of this changes in JavaScript functions. Keep a reference to this with a
var myController = this;
at the beginning of your controller's constructor function and then use
myController.posts = response.data;
rather than
this.posts = response.data;
in your http callback function.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.