Angular. Как передать параметр в функцию из шаблона и вызвать get?

Question

[Andrey Solovyev]

Всем привет.
Что делаю не так?

.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';
        });
    };
});

И в шаблоне пробую получить

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

Answer 1

[Александр Вульф]

Все так. Функция выполнится. Правда ничего не выведет, но выполнится.

Попробуйте codeo.me/5yQ
И в HTML: codeo.me/5yR

Comments

[Andrey Solovyev]

Попробовал. Та же проблема. В консоль валится куча ошибок "Error: [$interpolate:interr] Can't interpolate: {{ myFunc(4).my }}
TypeError: undefined is not a function"

[Александр Вульф]

@AndreySolo значит нельзя так функции юзать ;)

[Александр Вульф]

@AndreySolo лучше напишите директиву =)

[Сергей Протько]

@AndreySolo а какова вообще исходная задача? Мне просто кажется что вы изначально придумали себе проблему на пустом месте.

Обновил ответ, предложил решение которое покрывает большинство возникающих задачь. Основная суть - управлять всем должен контроллер, но никак не шаблон. Из представления вы можете только сообщить контроллеру что состояние изменилось и попросить контроллер как-то среагировать на это.

[Andrey Solovyev]

Да, действительно, здесь я застрял из-за принципа уже. Задача была следующая, есть json со статьей, в нем есть id автора. Хотел вывести таким образом блок с подробной информацией об авторе. Завтра просто запихну в общий json все данные автора и избавлюсь от проблемы.

Answer 2

[Сергей Протько]

Ну так верните из вашей функции промис, который возвращает $http. Вообще так лучше не делать, а лучше явно объяслять данные и выносить запросы в сервисы, но в целях обучения можно на это закрыть глаза.

Если я правильно понимаю изначальную задачу, то лучше сделать так:

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>

Если же у вас данные просто должны быть инициализированы сразу по инициализации контроллера - ну так вызовите все прямо там. Не стоит вообще управлять загрузкой и вызывать методы какие-либо из шаблонов. Все зависит от задачи конечно, но мне сложно придумать кейс когда это нужно делать.

Answer 3

[sasha]

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

а если нужна реакция на клик то

.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

[lega]

Вы можете изменить метод после первого вызова, что-бы он отдавал результат, например так:

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

Comments

[sasha]

ваш код вернет сначала result а потом уже высчитает его. бесмыссленен и беспощаден

[lega]

sasha: нет, все нормально, он сначала вернет "loading...", а потом когда будет получен результат, будет возвращать этот результат.