Question

我来自jQuery的背景，但我试图用我正在构建的天气网络应用程序学习AngularJS。我在页面顶部有4个选择框，其中包含城市列表。每个选择框对应于下面的天气容器，该容器显示所选城市的当前天气。

我正在使用天气容器的指令，如下所示。这是构建这个的正确方法吗？

<weather city="select1"></weather>
<weather city="select2"></weather>
<weather city="select3"></weather>
<weather city="select4"></weather>

当我从选择框＃1中选择ATL时，它会在天气容器中为select1显示ATL。那部分有效。但现在我需要它去服务器并获取将在该指令中显示的天气数据。我有一个API工作，我可以传递ATL，它返回天气数据为JSON。这样做的正确角度方式是什么？我无法在指令中找到调用我的服务的地方，比如ui-router有resolve。感谢。

Answer 1

angular.module('yourApp')
    .directive('weather', ['$http', function ($http) {
        template: '<div data-ng-click="getWeather()">{{weatherData}}</div>',
        scope: {
            city: '='
        },
        controller: function(scope) {
            scope.getWeather = function() {
                $http.get('/your-weather-api?city=' + scope.city)
                    .success(function(data) {
                        scope.weatherData = data;
                    });
            }
        }
    }]);

这样的事情可能会奏效，但我认为这不是构建项目的最佳方式。您可以发布您的代码，或者最好是plnkr，我们可能能够提供更多帮助吗？

这是一个plnkr，显示了一个粗略的方法，可能比你之后更容易管理： http://plnkr.co/edit/XcjkfOpuiaasGWa3C0Lv?p=preview

从AngularJS指令加载远程数据

1 个答案: