angularJS：觀看指令異步數據

Question

我想在我的指令來觀看異步數據，這裏是我的JS代碼：

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

    myApp.config(function($httpProvider) { 

     $httpProvider.defaults.headers.get = {}; 

     $httpProvider.defaults.headers.get["Content-Type"] = "application/json"; 

    }); 

    myApp.factory('DataService', function($http) { 

     return { getData: function(prmParentId, prmParentSrc) { 
      var data = $.param({ 'parentId': prmParentId, 'parentSrc': prmParentSrc }); 
      return $http.get("Temp.aspx/GetData", { params: { parentId: prmParentId, parentSrc: prmParentSrc }, data: '' }). 
      success(function(result) { 
       return result.d; 
      }); 
     } 
     } 
    }); 

    myApp.controller('myController', myController); 

    function myController($scope, DataService) { 
     $scope.treeNodes = []; 
     $scope.init = function() { 

      DataService.getData(0, 0).then(function(promise) { 
       $scope.treeNodes = promise.data.d; 
      }); 
     } 

     $scope.focusNode = function() { 
      console.log("kuku2"); 
     } 

    } 

    myApp.directive('nodes', function() { 
     return { 
      restrict: "E", 
      replace: true, 
      scope: { 
       nodes: '=', 
       clickFn: '&' 
      }, 
      template: "<ul><node ng-repeat='node in nodes' node='node' click-fn='clickFn()'></node></ul>", 
      link: function(scope, element, attrs) { 
       scope.$watch('treeNodes', function(newVal, oldVal) { 

        console.log(scope.treeNodes); 
       }, true); 
      } 

     } 
    }); 

    myApp.directive('node', function($compile) { 
     return { 
      restrict: "E", 
      replace: true, 
      scope: { 
       node: '=', 
       clickFn: '&' 
      }, 
      template: "<li><span ng-click='clickFn()(node)'>{{node.ObjectName}}</span></li>", 
      link: function(scope, element, attrs) { 

       if (angular.isArray(scope.node.Children)) { 

        element.append("<nodes nodes='node.Children' click-fn='clickFn()'></nodes>"); 

        $compile('<nodes nodes="node.Children" click-fn="clickFn()"></nodes>')(scope, function(cloned, scope) { 

         element.append(cloned); 
        }); 
       } 
      } 
     } 
    }); 
})(angular); 

這是我的HTML：

<div ng-app="testTree"> 
     <div ng-controller="myController"> 
      <div ng-init="init()"> 
       <nodes node="treeNodes" click-fn="focusNode"></nodes> 
      </div> 
     </div> 
    </div> 

的控制檯的指令始終是「未定義的」。我在這裏做錯了什麼？ 謝謝。

Answer 1

通過treeNodes作爲nodes在您的指令。所以你需要看nodes。

scope.$watch('nodes', function(newVal, oldVal) { 

        console.log($scope.nodes); 
       }, true); 

<div ng-app="testTree"> 
     <div ng-controller="myController"> 
      <div ng-init="init()"> 
       <nodes nodes="treeNodes" click-fn="focusNode"></nodes> 
      </div> 
     </div> 
    </div>