Обновление угловых переменных области из $ http.get call

Я довольно новичок в Angular, и я пытаюсь понять, почему переменные области не обновляются после того, как они были установлены.

Я вызываю API-интерфейс Node для удаления объектов json, содержащих мои данные. Кажется, что все работает нормально, за исключением того, что параметр $ scope.profile возвращает данные, возвращаемые API.

Установка:

app.js

(function() { 
    var app = angular.module("gamedin", []); 


    app.controller('profileController', function($scope, $http, $timeout) { 
    $scope.profile = {}; 

    $scope.getProfile = function() { 
     var vanityUrl = $scope.text.substr($scope.text.lastIndexOf('/') + 1); 

     $http.get('/steamid/' + vanityUrl) 
     .then(function(data) { 
     $http.get('/profile/' + data.data.response.steamid) 
     .then(function(data) { 
      console.log(data.data.response.players[0]); // Correct data 
      $scope.profile = data.data.response.players[0]; // View isn't updated 
     }) 
     }) 

     // Reset the input text 
     $scope.text = ""; 
    } 
    }); 

    ... 

    app.directive('giHeader', function() { 
    return { 
     restrict: 'E', 
     templateUrl: 'components/header/template.html' 
    }; 
    }) 

    app.directive('giProfile', function() { 
    return { 
     restrict: 'E', 
     templateUrl: 'components/profile/template.html' 
    } 
    }) 

})();

компоненты/заголовок/template.html

<header> 
    <div class="header-content" ng-controller="profileController"> 
    <div class="col-md-3"></div> 

    <div class="col-md-6"> 
     <div class="header-content-inner"> 
     <input ng-model="text" ng-keyup="$event.keyCode == 13 && getProfile()" class="form-control" type="text" placeholder="Enter Steam URL"> 
     </div> 
     <p>e.g., http://steamcommunity.com/id/verydankprofilelink</p> 
    </div> 

    <div class="col-md-3"></div> 
    </div> 
</header>

компоненты/профиль/template.html

<div class="container"> 
    <div ng-controller="profileController"> 
    <h3> 
     <strong>Username: {{ profile.personaname }}</strong> 
    </h3> 
    <p> SteamID: {{ profile.steamid }}</p> 
    </div> 
</div>

index.html

<!doctype html> 
<html ng-app="gamedin"> 
<head> 
    ... 
</head> 

<body> 

    ... 

    <gi-header></gi-header> 

    <gi-profile></gi-profile> 

    ... 

</body> 
</html>

Я попытался обернув его в $ объеме. $ Применяются, как этот

$scope.$apply(function() { 
    $scope.profile = data.data.response.players[0]; 
});

... что привело к Error: [$rootScope:inprog]

Тогда я испрошен

$timeout(function() { 
    $scope.profile = data.data.response.players[0]; 
}, 0);

$scope.$evalAsync(function() { 
    $scope.profile = data.data.response.players[0]; 
});

... и хотя ошибок не было, вид все еще не обновлялся.

Я понимаю, что я, вероятно, не понимаю некоторые аспекты углового правильно, поэтому, пожалуйста, просветите меня!

источник

2016-04-10 topic

В каком разделе вы ожидаете обновления? Я не вижу ссылки на переменную 'profile' в HTML. Вы говорите о директивах? –

Нет ли проблемы с именем свойства «personaname»? Кажется странным. – jlowcs

@OmriAharon: Я хочу обновить 'components/profile/template.html' (который обращается к переменной профиля), когда обновляется $ scope.profile. – topic

Проблема состоит в том, что у вас есть 2 экземпляра profileController, по одному в каждом шаблоне директивы. Они должны совместно использовать один и тот же экземпляр, потому что теперь происходит то, что один экземпляр обновляет переменную profile в своей области, а другой не знает. Например, экземпляр шаблона заголовка profileController выполняет вызов, и вы ожидаете увидеть изменение в шаблоне профиля.

Вам необходима реструктуризация. Я предлагаю использовать контроллер на странице, которая использует директиву, и разделить объект профиля в обеих директив:

<gi-header profile="profile"></gi-header> 

    <gi-profile profile="profile"></gi-profile>

И в каждой директиве:

return { 
    restrict: 'E', 
    scope: { 
    profile: '=' 
    }, 
    templateUrl: 'components/header/template.html' 
};

А на более общем - если вы хотите использовать контроллер в директиве, вы должны, вероятно, использовать свойство «controller» директивы.

источник

2016-04-10 14:46:42

Конечно, в этом проблема. Спасибо огромное! – topic

@topic Нет проблем :) Попробуйте отметить ответы, которые решили вашу проблему как «решены» (галочка), чтобы другие знали, что вы нашли свой ответ. –

Попробуйте использовать этот метод вместо:

$http.get('/steamid/' + vanityUrl) 
    .then(function(data) { 
    return $http.get('/profile/' + data.data.response.steamid).then(function(data) { 
     return data; 
    }); 
    }) 
    .then(function(data) { 
    $scope.profile = data.data.response.players[0]; // View isn't updated 
    })

Где вы используете два раздела решает вместо одного, а затем обновить область со второй решимости.

источник

2016-04-10 13:47:41 Chrillewoodz

Спасибо, но это все еще не работает. Я возвращаюсь из обратного вызова, поэтому я приковал его. – topic

Если вы консоль регистрируете данные во втором решении, что вы получаете? – Chrillewoodz

Он выводит правильный объект. – topic

Обновление угловых переменных области из $ http.get call

ответ

Смежные вопросы