在AngularJS中，我的指令無法訪問$ http中定義的父控件的$ scope屬性

Question

我正在創建一個繼承父控制器范圍的自定義指令。 在大多數情況下，除了在$ http.get中設置的屬性外，我都可以訪問在控制器的“ $ scope”中設置的指令的“ scope”對象。 這些屬性是來自API還是僅由字面定義都無關緊要。

對我來說，很奇怪的是，如果我僅記錄指令的“作用域”，就可以肯定看到$ http.get設置的屬性，但是如果我嘗試直接訪問它們，則它們是未定義的。

我可以完美地訪問HTML視圖中的所有內容。

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"
  };
});

Answer 2

您的指令共享控制器的相同作用域。 在模板中找到指令時，將加載指令的鏈接函數。 $scope.helloFromController只是一個字符串。 因此，您通過登錄控制台看到了這一點。 但是， $scope.helloFromHttp是承諾解決了后置$http 。 因此，在控制器中進行設置之前，您不會立即在console.log(scope.helloFromHttp)看到該值。 您可以嘗試使用$ timeout查看scope.helloFromHttp的更改值。

myApp.directive('useData', function ($parse, $timeout) {
  var directiveObj = {
    link: function (scope, element, attrs) {
      // Returns the scope object that clearly includes the helloFromController and helloFromControllerHttp properties
      console.log(scope); 

      // returns "Hello! This is the controller!"  
      console.log(scope.helloFromController); 

      // returns undefined
      console.log(scope.helloFromHttp) 

      // set $timeout to trigger after 10 sec, you can reduce or increase the time
      $timeout(function() {
        console.log(scope.helloFromHttp); 
      }, 10000)
    } 
  };
  return directiveObj;
});

希望這可以幫助。

Answer 3

實際上，您的代碼無需任何更改即可正常運行； 問題是您在控制台中顯示了它，但是如果以HTML顯示它，它將按預期方式刷新。 這是示例： http : //plnkr.co/edit/WrqO7FeF5d5JdVas9jiL?p=preview

directive('useData', function($parse) {
  return {
    template: "From directive: {{helloFromHttp}}",
    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
    }
  };
});