angularJS:在指令中监视异步数据

我试图在指令中查看异步数据，以下是我的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);

（函数（角度）{
var myApp=angular.module（'testTree'，[]）；
myApp.config（函数（$httpProvider）{
$httpProvider.defaults.headers.get={}；
$httpProvider.defaults.headers.get[“内容类型”]=“应用程序/json”；
});
myApp.factory（'DataService'，函数（$http）{
返回{getData:function（prmParentId，prmParentSrc）{
var data=$.param（{'parentId'：prmParentId，'parentSrc'：prmParentSrc}）；
返回$http.get（“Temp.aspx/GetData”，{params:{parentId:prmParentId，parentSrc:prmParentSrc}，数据：''}）。
成功（功能（结果）{
返回结果d；
});
}
}
});
myApp.controller（'myController'，myController）；
函数myController（$scope，DataService）{
$scope.treeNodes=[]；
$scope.init=函数（）{
getData（0，0）.then（函数（promise）{
$scope.treeNodes=promise.data.d；
});
}
$scope.focusNode=函数（）{
控制台日志（“kuku2”）；
}
}
myApp.directive（'nodes'，function（）{
返回{
限制：“E”，
替换：正确，
范围：{
节点：'='，
单击fn:“&”
},
模板：“
”，
链接：函数（范围、元素、属性）{
范围.$watch（'treeNodes'，函数（newVal，oldVal）{
console.log（scope.treeNodes）；
}，对）；
}
}
});
myApp.directive（'node'，function（$compile）{
返回{
限制：“E”，
替换：正确，
范围：{
节点：'='，
单击fn:“&”
},
模板：“
{{node.ObjectName}
”，
链接：函数（范围、元素、属性）{
if（angular.isArray（scope.node.Children））{
元素。追加（“”）；
$compile（“”）（范围，函数（克隆，范围）{
元素。追加（克隆）；
});
}
}
}
});
})（角度）；

这是我的HTML：

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

指令手表中的控制台始终为“未定义”。我做错了什么？

---

谢谢。

将

树节点作为
节点传递到指令中。因此，您需要监视
节点

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>

scope.$watch（'nodes'，函数（newVal，oldVal）{
log（$scope.nodes）；
}，对）；