0

我无法访问我从服务器获取的设置，我已经设置了我的应用程序并且我的指令正在运行。我正在使用 $http 从服务器获取一个 js 文件，该文件为我的应用程序设置了一堆请求是从我的指令的控制器发送的，但是当我执行 console.log 时我无法进入范围（范围）它向我显示了我的范围，但是当我尝试从指令访问我范围内的对象时，我只得到一个空值？

<!DOCTYPE html>
<html ng-app="uploader">
   <head>
     <title></title>
     <script src="Scripts/angular.min.js"></script>
     <script src="Scripts/angular-resource.min.js"></script>
     <script src="Scripts/jquery-1.10.2.min.js"></script>
     <script src="app/uploader.js"></script>
 <style>

    html, body { margin:0; padding:0; height:100%; background-color:#e3e3e3; }

</style>
</head>
  <body dropzone='{"url":"app/settings.js"}'>

 </body>
</html>

我的 app/uploader.js 文件

var app = angular.module("uploader", []);

app.directive('dropzone', function () {

return {

    restrict: "A",
    controller: function ($scope, $http) {

        $scope.getSettings = function (url) {

            $http.get(url).then(function (response) {

                $scope.settings = response.data;
                //console.log($scope.settings);
            });

        }

    },
    link: function (scope, element, attr) {

        var settings = JSON.parse(attr.dropzone);
        scope.getSettings(settings.url);
        console.log(element);
        console.log(attr);
        console.log(scope);

        function handleDragEnter(e) {

            console.log(e)
            //console.log(scope.settings);
        }

        function handleDragOver(e) {

            console.log(e)
            //console.log(scope.settings);


        } function handleDrop(e) {

            console.log(e)
            //console.log(scope.settings);

        }

        element.bind('dragenter', handleDragEnter);
        element.bind('dragover', handleDragOver);
        element.bind('drop', handleDrop);
        console.log(scope.settings);

    }

}

});
4

1 回答 1

0

因为$scope.getSettings()是异步的，$scope.settings所以在事件发生时可能还没有设置。您可以更新link函数以等待调用完成，然后再实际绑定事件。

link: function (scope, element, attr) {
    var settings = JSON.parse(attr.dropzone);
    scope.getSettings(settings.url).then(function() {
        function handleDragEnter(e) {
            console.log(e);
        }
        function handleDragOver(e) {
            console.log(e)
        } 
        function handleDrop(e) {
            console.log(e)
        }
        element.bind('dragenter', handleDragEnter);
        element.bind('dragover', handleDragOver);
        element.bind('drop', handleDrop);
        console.log(scope.settings);
    });
}

此外，更新getSettings以返回承诺。

$scope.getSettings = function (url) {
    return $http.get(url).then(function (response) {
        $scope.settings = response.data;
    });
};
于 2013-09-26T19:08:36.740 回答