Форум

triest · #11 (**permalink**) 09.11.2016, 20:40

Что в консоли: Error: Argument 'DemoController' is not a function, got undefined

Coriolan161 · #12 (**permalink**) 09.11.2016, 21:39

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 и именованную функцию

triest · #13 (**permalink**) 10.11.2016, 23:04

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

Coriolan161 · #14 (**permalink**) 11.11.2016, 11:27

triest,
почитай про взятие атрибута
У <img>элементов src есть как свойство
document.getElementById("my-image").src = "my-image.png";

triest · #15 (**permalink**) 12.11.2016, 01:00

Что-то не выходит:

<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'>;

Coriolan161 · #16 (**permalink**) 12.11.2016, 23:43

triest,
1) Что ты делаешь? Зачем <img> пихать в <script>?
2) getElementById, а не твоя getElementByID
3) Что это? var icon2= {{vm.data.list[0].weather[0].icon}};
4) Ты меня достал

triest · #17 (**permalink**) 13.11.2016, 16:33

Спасибо за помощь.

Решение: angular.js.mini надо скачать и закинуть в папку, а не давать ссылку на него в расширении.
Для html ссылка работает, а расширение-нет.

Манифест:

Цитата:

{
"manifest_version" : 2,
"name" : "...",
"short_name" : "...",
"version" : "1.0",
"author" : "...",
"description" : "...",

"icons" : {
"16" : "icons/16x16.png",
"32" : "icons/32x32.png",
"48" : "icons/48x48.png",
"64" : "icons/64x64.png",
"128" : "icons/128x128.png"
},

"content_scripts": [
{
"matches": [ "*://*/*" ],
"js": [ "weather.js" ]
}
],

"background" : {

},

"browser_action": {
"default_title": "...",
"default_icon": "icons/water.png",
"default_popup": "popup.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";

    });


});

Форум

Справочник

Discord чат

Курсы javascript