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>

指令手表中的控制台总是＆＃34;未定义＆＃34;。我在这做错了什么？感谢。

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>

angularJS：在指令中查看异步数据

1 个答案: