Что в консоли: Error: Argument 'DemoController' is not a function, got undefined
|
triest,
Возьми и в своем саблайме поиском по фолдеру найди все DemoController и переименуй в DemoCtrl У меня вылазило TypeError: $http is not a function Поправил и у меня нормально отображается твой проблемный кусок с <h1><b>{{vm.data.city.name}}</b></h1> <h1><b>{{vm.data.list[0].temp.day}}</b></h1> Надо просто правильно дописать в weather.js // вместо app.controller('DemoCtrl',[ function($http) { // надо app.controller('DemoCtrl',['$http', function($http) { Выводит Kansas City 63.14 Ты понял что здесь происходит? Зачем всю эту фигню в квадратных скобочках писать? Вообще это не есть хорошо с точки зрения читаемости и поддержабельности кода Надо использовать $inject и именованную функцию |
Coriolan161 спасибо за совет. А как из JSON (поля weather.icon) получить стоку вида <img src='http://openweathermap.org/img/w/13d.png' alt='Icon depicting current weather.'> где 13d ноходяться в weather.icon Пробовал как vm.URL2="http://openweathermap.org/img/w/"+vm.data.weather.icon+".png";, но н евыходит. Код:http://jsbin.com/sofonovura/edit?html,js,console,output Решение найдено, если кому понадобиться: <h1><b>{{vm.data.city.name}}</b></h1> <h1><b>{{vm.data.city.country}}</b></h1> <font color="red"> <h1><b>temp.day:</b><h1> </font> <h1><b>{{vm.data.list[0].temp.day}}</b></h1> <font color="red"> <h1><b>weather.main:</b><h1></font> <h1><b>{{vm.data.list[0].weather[0].description}}</b></h1> <!-- влажность работает--> <font color="red"> <h1><b>humidity:</b><h1></font> <h1><b>{{vm.data.list[0].humidity}}</b></h1> <font color="red"> <h1><b> {{vm.data.list[0].weather[0].description}} |
triest,
почитай про взятие атрибута У <img>элементов src есть как свойство document.getElementById("my-image").src = "my-image.png"; |
Что-то не выходит:
<script> var icon=document.getElementByID(vm.data.list[0].weather[0]); <img src='http://openweathermap.org/img/w/'+icon+'.png'>; </script> ни так. var icon2= {{vm.data.list[0].weather[0].icon}}; var icon=document.getElementByID(vm.data.list[0].weather[0]); <img src='http://openweathermap.org/img/w/'+icon2+'.png'>; |
triest,
1) Что ты делаешь? Зачем <img> пихать в <script>? 2) getElementById, а не твоя getElementByID 3) Что это? var icon2= {{vm.data.list[0].weather[0].icon}}; 4) Ты меня достал |
Спасибо за помощь.
Решение: angular.js.mini надо скачать и закинуть в папку, а не давать ссылку на него в расширении. Для html ссылка работает, а расширение-нет. Манифест: Цитата:
-<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Angular JS</title> <link rel="stylesheet" type="text/css" href="style.css"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> </head> <body ng-app="jsbin"> <div ng-controller="DemoCtrl as vm"> <script type="text/javascript" src="weather.js"></script> <cityStyle>{{vm.data.city.name}} </cityStyle><br> <countryStyle>Country:{{vm.data.city.country}}</countryStyle> <br> <img src={{vm.URL2}} alt={{vm.data.list[0].weather[0].description}} title={{vm.data.list[0].weather[0].description}} > <TempStyle> {{vm.data.list[0].temp.day}} °C </TempStyle> <br> <humidityStyle> Humidity: {{vm.data.list[0].humidity}} % </humidityStyle> <br> <PressureStyle> Pressure: {{vm.mmrts}} мм.рт.ст </PressureStyle> </div> </body> </html> var app = angular.module('jsbin', []); app.controller('DemoCtrl', function($http) { var vm = this; var temp1=[]; var URL2; var URL = 'http://api.openweathermap.org/data/2.5/forecast/daily'; var request = { method: 'GET', url: URL, params: { q: 'Petrozavodsk', mode: 'json', units: 'metric', cnt: '7', appid: '3ac1f68b653ffbf72a5f782420062771' } }; $http(request) .then(function(response) { vm.data = response.data; vm.URL2="http://openweathermap.org/img/w/"+vm.data.list[0].weather[0].icon+".png"; vm.mmrts=vm.data.list[0].pressure* 0.7500; }). catch(function(response) { vm.data = response.data; vm.URL2="http://openweathermap.org/img/w/"+vm.data.list[0].weather[0].icon+".png"; }); }); |
Часовой пояс GMT +3, время: 03:01. |