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>