我在从我的指令 Angular 访问控制器的范围时遇到问题

I am having an issue accessing the scope of my controller from my directive Angular

本文关键字：控制器 范围 问题 遇到 访问控制 访问 我的 指令 Angular      更新时间：2023-09-26

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

<!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>

我的应用/上传器.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);
    }
}
});

> 由于$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;
    });
};
相关文章：