AngularJs执行上下文(范围)

时间:2017-04-30 07:49:34

标签: javascript angularjs scope

我得到了一个充满回调函数的有效代码,回调地狱

这是:

<?php
    function compress($source, $destination, $quality) {
    $info = getimagesize($source);
    if ($info['mime'] == 'image/jpeg') 
        $image = imagecreatefromjpeg($source);
    elseif ($info['mime'] == 'image/gif') 
        $image = imagecreatefromgif($source);
    elseif ($info['mime'] == 'image/png') 
        $image = imagecreatefrompng($source);

    imagejpeg($image, $destination, $quality);
    return $destination;
}

if(isset($_POST['submit'])){
    $source_img =$_FILES["fileToUpload"]["tmp_name"];
    $source_img_name =basename($_FILES["fileToUpload"]["name"]);
    $temp = explode(".", $source_img_name);
    $newfilename = round(microtime(true)) . '.' . end($temp);
    $destination_img= "assets/$newfilename";

    $d = compress($source_img, $destination_img, 90);
}
?>

所以我尝试使用下面的函数定义使它更平坦,但似乎执行上下文无法解析我的app.directive('destinationDirective', function () { function destinationController($http, $rootScope, $scope) { $scope.getWeather = function (destination) { var url = 'http://api.openweathermap.org/data/2.5/weather?q=' + destination.city + '&appid=' + $scope.apiKey + '&units=metric'; $http.get(url).then(function success(response) { console.log('success', response); if (response.data.weather) { destination.weather = {}; destination.weather.main = response.data.weather[0].main; destination.weather.temp = response.data.main.temp; } else { $scope.message = 'City not found'; } }, function error(error) { $scope.message = 'Server error' }); }; } return { scope: { destination: '=', apiKey: '=', onRemove: '&' }, templateUrl: './destinationDirective.html', controller: destinationController }; }); 变量。我尝试绑定执行上下文,它仍然无法解决。 AngularJS有没有“调整”函数的执行上下文?

destination

我也尝试过:

app.directive('destinationDirective', function () {
    function destinationController($http, $rootScope, $scope) {
        $scope.getWeather = function (destination) {
            var url = 'http://api.openweathermap.org/data/2.5/weather?q=' + destination.city
                + '&appid=' + $scope.apiKey
                + '&units=metric';
            $http.get(url).then(success.bind(destination), error);
        };
    }

    function success(response) {
        console.log('success', response);
        if (response.data.weather) {
            destination.weather = {};
            destination.weather.main = response.data.weather[0].main;
            destination.weather.temp = response.data.main.temp;
        } else {
            $scope.message = 'City not found';
        }
    }

    function error(error) {
        $scope.message = 'Server error'
    }

    return {
        scope: {
            destination: '=',
            apiKey: '=',
            onRemove: '&'
        },
        templateUrl: './destinationDirective.html',
        controller: destinationController
    };
});

$http.get(url).then(angular.bind(this, success, destination), error);

但现在我获得了$http.get(url).then(success.bind(this, destination), error); 的内容并丢失了API的destination

关于支持重复的编辑:我的问题是独一无二的,因为主题是关于角度上下文,当在控制器上定义倍数函数时,我找到了解决方案,我现在就发布它。

1 个答案:

答案 0 :(得分:0)

这里的技巧是为“class”destinationController定义一个“私有成员属性”,如下所示。这些函数回顾先前的执行上下文并找到所需的属性。在我从经典的OOP背景(Java,C#和PHP)中提出问题之前,当我不得不重新格式化一些最初的回调时,这不是证据。

app.directive('destinationDirective', function () {
    function destinationController($http, $rootScope, $scope) {
        var _destination;

        $scope.getWeather = function (destination) {
            _destination = destination;
            var url = 'http://api.openweathermap.org/data/2.5/weather?q=' + destination.city
                + '&appid=' + $scope.apiKey
                + '&units=metric';
            $http.get(url).then(success, error);
        };

        function success(response) {
            if (response.data.weather) {
                _destination.weather = {};
                _destination.weather.main = response.data.weather[0].main;
                _destination.weather.temp = response.data.main.temp;
            } else {
                $rootScope.message = 'City not found';
            }
        }

        function error(error) {
            $rootScope.message = 'Server error'
        }
    }

    return {
        scope: {
            destination: '=',
            apiKey: '=',
            onRemove: '&'
        },
        templateUrl: './destinationDirective.html',
        controller: destinationController
    };
});