Angular. How to pass a parameter to a function from a template and call get?

Question

JavaScript

Hello.
What am I doing wrong?

.controller('ProfileDetail', function($scope, $http) {
    $scope.myFunc = function (id) {
        // получаем json
        $scope.url = 'profile/?=' + id;
        $http.get($scope.url).success(function (data) {
            return data;
        }).error(function (data, status) {
            $scope.response = 'Request failed';
        });
    };
});

And in the template I try to get

<div ng-controller="ProfileDetail">
    <div>
        {{ myFunc(4) }}
    /div>
</div>

Answer 1

It's like that. The function will be executed. The truth will not output anything, but it will be executed.
Try codeo.me/5yQ
AND in HTML: codeo.me/5yR

Answer 2

Well, return a promise from your function that returns $http. In general, it’s better not to do this, but it’s better to explicitly explain the data and make requests to services, but for the purposes of training, you can turn a blind eye to this.
If I understand the original task correctly, it is better to do this:

angular.module('app')
    .controller('ProfileDetail', $scope, $http) {
        $scope.$watch('selectedId', function (id) {
            if (!id) {
                  $scope.data = {};
                  return;
            }
            var url = 'profile/?=' + id;
            $http.get(url).then(function (response) {
                $scope.data = response.data;
            }, function () {
                // обрабатывайте ошибки
            })
        });
    })

<div ng-controller="ProfileDetail">
    <div>
        {{ data }}
    /div>
<span class="btn" ng-click="selectedId = 4"></span>
</div>

If your data simply needs to be initialized immediately after the initialization of the controller - well, call everything right there. You should not manage loading at all and call methods of any of the templates. It all depends on the task, of course, but it's hard for me to come up with a case when this needs to be done.

Answer 3

.controller('ProfileDetail', function($scope, $http) {
        var url = 'profile/?=4';
        $http.get(url).success(function (data) {
            $scope.data = data;
        }).error(function (data, status) {
            $scope.response = 'Request failed';
        });
    
});

<div ng-controller="ProfileDetail">
    <div>
        {{ data }}
    /div>
</div>

and if you need a reaction to a click then

.controller('ProfileDetail', function($scope, $http) {
    $scope.data = '';
    $scope.doThisShit = function(id){
        var url = 'profile/?=' + id;
        $http.get(url).success(function (data) {
            $scope.data = data;
        }).error(function (data, status) {
            $scope.response = 'Request failed';
        });
    }
});

<div ng-controller="ProfileDetail">
    <div ng-click="doThisShit(4)">
        {{ data }}
    /div>
</div>

Answer 4

You can change the method after the first call to return the result, like so:

$scope.myFunc = function(id) {
    var result = 'loading...';
    $scope.myFunc = function() { return result };
    $http.get($scope.url).success(function (data) {
        result = data;
    })
    return result
};