Question

嘿伙计我的角度天气应用程序遇到问题“模板指令'weatherReport'必须只有一个根元素.signments / weatherReport.html”

这是我的app.js代码

// Directives

weatherApp.directive("weatherReport", function() {
   return {
       restrict: 'E',
       templateUrl: 'directives/weatherReport.html',
       replace: true,
       scope: {
           weatherDay: "=",
           convertToStandard: "&",
           convertToDate: "&",
           dateFormat: "@"
       }
   }
});

这是我的weatherReport.html

    <div class="panels panel-default">
        <div class="panel-heading">
          <h3 class="panel-title">{{ convertToDate({ dt: weattherDay.dt }) | date: dateFormat }}</h3>
        </div>
        <div class="panel-body">
            Daytime temperature: {{ convertToStandard( { daytimeTemp: weatherDay.temp.day }) }}
        </div>
    </div>
</div>

完整的app.js

   // Module

var weatherApp = angular.module ('weatherApp',['ngRoute', 'ngResource']);


weatherApp.config(function($routeProvider) {

    $routeProvider

    .when ('/' , {
        templateUrl: 'pages/home.html',
        controller: 'homeController'
    })

    .when ('/forecast' , {
        templateUrl: 'pages/forecast.html',
        controller: 'forecastController'
    })

    .when ('/forecast/:days' , {
        templateUrl: 'pages/forecast.html',
        controller: 'forecastController'
    })
});


//SERVICES

weatherApp.service('cityService', function(){

    this.city = "New York, NY";
});

//Controllers
weatherApp.controller('homeController', ['$scope' , 'cityService', function($scope , cityService){
    $scope.city = cityService.city;

    $scope.$watch('city', function(){
        cityService.city = $scope.city;
    });
}]);


weatherApp.controller('forecastController', ['$scope' ,'$resource','$routeParams', 'cityService', function($scope ,$resource,$routeParams, cityService){

    var apiID = "2de143494c0b295cca9337e1e96b00e0";
    $scope.city = cityService.city;

    $scope.days = $routeParams.days || '2';

    $scope.weatherAPI = $resource("http://api.openweathermap.org/data/2.5/forecast/daily", {
        callback:"JSON_CALLBACK"},{ get:{ method:"JSONP"}});

    $scope.weatherResultDaily = $scope.weatherAPI.get({ q: $scope.city, cnt:$scope.days, appid: apiID });

    $scope.convertToCalcuis = function (degK) {


        return Math.round((1.8 * (degK - 273.15)));
    };

    $scope.convertToDate = function (dt) {

            //Date format came in millisecounds
        return new Date(dt * 1000);
    };

}]);


// Directives

weatherApp.directive("weatherReport", function() {
   return {
       restrict: 'E',
       templateUrl: 'directives/weatherReport.html',
       replace: true,
       scope: {
           weatherDay: "=",
           convertToStandard: "&",
           convertToDate: "&",
           dateFormat: "@"
       }
   }
});

提前致谢

Answer 1

您的模板需要一个包装元素，而您的模板缺少开头<div>。

<div>
    <div class="panels panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">{{ convertToDate({ dt: weattherDay.dt }) | date: dateFormat }}</h3>
        </div>
        <div class="panel-body">
            Daytime temperature: {{ convertToStandard( { daytimeTemp: weatherDay.temp.day }) }}
        </div>
    </div>
</div>

如果没有div您的模板不完整。

指令'weatherReport'的模板必须只有一个根元素。指令/ weatherReport.html

1 个答案: