javascript - 在 AngularJS 中，我的指令无法访问 $http 中定义的父 Controller 的 $scope 属性

Question

我正在创建一个继承父 Controller 范围的自定义指令。大多数情况下，我可以访问我在 Controller 的“$scope”中设置的指令“范围”对象，但我在 $http.get 中设置的属性除外。这些属性是来自 API 还是仅按字面定义并不重要。

对我来说非常奇怪的是，如果我只记录指令的“范围”，我肯定可以看到 $http.get 设置的属性，但如果我尝试直接访问它们，它们是未定义的。

我可以完美地访问 HTML View 中的所有内容。

var myApp = angular.module('myApp');

myApp.controller('getData', function($scope, $http) {
  var myData='myData.json';
  $scope.helloFromController = "Hello! This is the controller!";
  $scope.getTheData = function() {
    $http.get(myData).
      success(function(data, status) {
        $scope.helloFromHttp = "Hello! This is the http!";
      });
  };
  $scope.getTheData();
});

myApp.directive('useData', function ($parse) {
  var directiveObj = {
    link: function (scope, element, attrs) {
      console.log(scope); 
        // Returns the scope object that clearly includes the helloFromController and helloFromControllerHttp properties
      console.log(scope.helloFromController); 
        // returns "Hello! This is the controller!"
      console.log(scope.helloFromHttp) 
        // returns undefined
    } 
  };
  return directiveObj;
});

看起来我不明白 $scope 如何与 $http 一起工作。感谢您的帮助。

Answer 1

链接函数在调用异步 http 调用的回调之前执行。

示例代码:http://jsfiddle.net/k54ubb9L/

<div ng-controller="MyCtrl" use-data>
  Hello, {{ userData.username }}!
</div>


var myApp = angular.module('myApp', []);

myApp.controller('MyCtrl', function($scope, $http) {

  function getTheData() {
    $http.get("http://jsonplaceholder.typicode.com/users/1").
    success(function(response, status) {
      $scope.userData = response;
    });
  };

  getTheData();
});

myApp.directive('useData', function($parse) {
  return {
    link: function(scope, element, attrs) {
      scope.$watch("userData", function(newValue, oldValue) {
        console.log(newValue, oldValue);
      });
    },
    restrict: "A"
  };
});