結合Fiddle的HTML和JS

Question

在此論壇帖子中提出了類似的問題，但我仍然無法將代碼從JSfiddle轉換為HTML。

JSfiddle示例可以在這里找到。

我嘗試使用前面提到的論壇帖子中建議的技術，即：

<html>
<head>
<style type="text/css">
    // CSS Content
    </style>
</head>
<body ng-app="myApp">
 <!-- some html elements -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
    <script language="JavaScript"  type="text/javascript">
        // more js here.
    </script>   
</body>

因為我是一個完全菜鳥，所以我只是將HTML和Javascript復制到了一些html元素和//更多js此處。 在不更改API密鑰的情況下，最終代碼如下所示：

<html>
<head>
<style type="text/css">
    // CSS Content
    </style>
</head>
<body ng-app="myApp">
<div ng-app="myapp" ng-controller="WeatherCtrl">
    <h2>Weather in Salzburg, Austria</h2>
    <weather-icon cloudiness="{{ weather.clouds }}"></weather-icon>
    <h3>Current: {{ weather.temp.current | temp:2 }}</h3>
    min: {{ weather.temp.min | temp }}, max: {{ weather.temp.max | temp }}
</div>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
    <script language="JavaScript"  type="text/javascript">

'use strict';

var myapp = angular.module('myapp', []);

myapp.factory('weatherService', function($http) {
    return { 
      getWeather: function() {
        var weather = { temp: {}, clouds: null };
        $http.jsonp('http://api.openweathermap.org/data/2.5/weather?q=Salzburg,at&units=metric&callback=JSON_CALLBACK&APPID=f9dbd911bc01df1d9ce563b2ba4d3209').success(function(data) {
            if (data) {
                if (data.main) {
                    weather.temp.current = data.main.temp;
                    weather.temp.min = data.main.temp_min;
                    weather.temp.max = data.main.temp_max;
                }
                weather.clouds = data.clouds ? data.clouds.all : undefined;
            }
        });

        return weather;
      }
    }; 
});

myapp.filter('temp', function($filter) {
    return function(input, precision) {
        if (!precision) {
            precision = 1;
        }
        var numberFilter = $filter('number');
        return numberFilter(input, precision) + '\u00B0C';
    };
});

myapp.controller('WeatherCtrl', function ($scope, weatherService) {
    $scope.weather = weatherService.getWeather();
});

myapp.directive('weatherIcon', function() {
    return {
        restrict: 'E', replace: true,
        scope: {
            cloudiness: '@'
        },
        controller: function($scope) {
            $scope.imgurl = function() {
                var baseUrl = 'https://ssl.gstatic.com/onebox/weather/128/';
                if ($scope.cloudiness < 20) {
                    return baseUrl + 'sunny.png';
                } else if ($scope.cloudiness < 90) {
                   return baseUrl + 'partly_cloudy.png';
                } else {
                    return baseUrl + 'cloudy.png';
                }
            };
        },
        template: '<div style="float:left"><img ng-src="{{ imgurl() }}"></div>'
    };
});

    </script>   
</body>

我的輸出如下所示：

誰能告訴我該怎么做？

Answer 1

問題是您要聲明兩個應用程序從body <body>標記中刪除“ ng-app =“ myApp”。

結合Fiddle的HTML和JS

問題描述

1 個解決方案

解決方案1
1 已采納 2017-07-07 01:30:44

結合Fiddle的HTML和JS

問題描述

1 個解決方案

解決方案1 1 已采納 2017-07-07 01:30:44

解決方案1
1 已采納 2017-07-07 01:30:44