0

サーバーから取得している設定にアクセスできません。アプリがセットアップされており、ディレクティブが機能しています。$http を使用して、アプリの設定が多数あるサーバーから js ファイルを取得しています。リクエストはディレクティブのコントローラーから送信されていますが、console.log を実行するとスコープに到達できません。 (スコープ) スコープが表示されますが、ディレクティブからスコープ内のオブジェクトにアクセスしようとすると、null 値が返されますか?

<!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また、 promise を返すように更新します。

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