角度无法访问指令属性

Question

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 ?

Answer 1

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.