从视图调用工厂输出

我需要从视图访问变量utc。这是我的工厂，应该返回utc。从视图调用工厂输出

(function() { 
'use strict'; 
angular.module('weatherapp.weatherlist') 
.controller('WeatherlistController', function(utcFactory) { 
    var vm = this; 

    vm.UTC = utcFactory.myUTC(); 
}) 

.factory('utcFactory', function() { 
    var myUTC = function() { 
     var offset = -new Date().getTimezoneOffset(); 
     var utc = ((offset > 0 ? '+' : '') + offset/60); 
     return utc; 
    } 

    return { 
     myUTC: myUTC 
    } 
}); 
})();

我已经将utcFactory添加到控制器中，如下所示。

angular.module('weatherapp.weatherlist', ['weatherapp.locations']) 
     .controller('WeatherlistController', ['$scope', 'LocationService', 'WEATHER_API_URL', 'WEATHER_API_IMAGE_URL', 'WEATHER_API_ID', 'WeatherListFactory', 'utcFactory',WeatherListCtrl]);

但出于某种原因，我不能在任何地方访问utc变种，当我尝试测试它与控制台日志中我没有看到它。

我试图使用 {{UTC}}`

什么我做错了访问它？

这里是我的html

<ion-view view-title="Whatever The Weather"> 
    <ion-content> 
     <div ng-show="noLocation" class="card"> 
      <div class="item item-text-wrap"> 
       <div class="item"> 
        <p>There are currently no locations available. Feel free to add new ones.</p> 
       </div> 
      </div> 
     </div> 
     <div ng-hide="noLocation" ng-repeat="weatherdata in locationData" class="card"> 
      <div class="item item-divider icon-left weatherlist-title"> 
       <img ng-src="{{weatherdata.weather[0].icon}}"><span>{{weatherdata.name}}, {{weatherdata.sys.country}} - {{weatherdata.weather[0].description}}</span> 
      </div> 
      <div class="item item-text-wrap"> 
       <div class="item"> 
        <div class="row"> 
         <div class="col"><h2>Temperature:</h2></div> 
         <div class="col col-40"><b>{{weatherdata.main.temp | fahrenheit}} &deg;F/{{weatherdata.main.temp | roundme}} &deg;C</b></div> 
        </div> 
        <div class="row"> 
         <div class="col"><h2>Sunset:</h2></div> 
         <div class="col col-30">{{weatherdata.sys.sunset | amFromUnix | amLocal | amDateFormat:'HH:mm a'}} <span class="tiny" ng-bind="'utc ' + weatherdata.utc"></span> </div> 
        </div> 
        <div class="row"> 
         <div class="col"><h2>Wind Speed:</h2></div> 
         <div class="col col-30">{{weatherdata.wind.speed}} ms/{{weatherdata.wind.speed | mph}} mph</div> 
        </div> 
        <div class="row"> 
         <div class="col"><h2>Humidity:</h2></div> 
         <div class="col col-30">{{weatherdata.main.humidity}} %</div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </ion-content> 
</ion-view>

来源

2016-07-06 Agent Zebra

你只需要调用工厂方法和属性的值到$scope变量。

这里是一个演示工作：

(function() { 
 
    "use strict"; 
 
    angular.module('app', []) 
 
    .controller('mainCtrl', function(utcFactory) { 
 
     var vm = this; 
 

 
     vm.utc = utcFactory.myUTC(); 
 
    }) 
 

 
    .factory('utcFactory', function() { 
 
     var myUTC = function() { 
 
      var offset = -new Date().getTimezoneOffset(); 
 
      var utc = ((offset > 0 ? '+' : '') + offset/60); 
 
      return utc; 
 
     } 
 

 
     return { 
 
      myUTC: myUTC 
 
     } 
 
    }); 
 
})();

<!DOCTYPE html> 
 
<html ng-app="app"> 
 

 
<head> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script> 
 
</head> 
 

 
<body ng-controller="mainCtrl as main"> 
 
    <span class="tiny" ng-bind="'UTC => ' + main.utc"></span> 
 
</body> 
 

 
</html>

我希望它能帮助。

来源

2016-07-06 00:50:08 developer033

谢谢，我几乎明白了，我认为ng-app标签是'ng-repate标签是'ng-repeat =“weatherData in locationData”，我将它添加到的控制器是'angular.module（'weatherapp.weatherlist'） .controller（'WeatherlistController'，function（utcFactory）'我在这里感到困惑，范围，这些名称需要保持不变，以显示当前显示的其他信息。你能看到我在哪里出错吗？ –

它给出了任何错误？ – developer033

不，只是没有utc在视图中。 –

不能直接获得接入UTC变种。您已经定义了一个名为'myUTC'的函数，它返回值为utc。

在您的控制器中，您必须致电utcFactory.myUTC()，这将返回'utc'的值。

编辑：

创建在您的范围控制器（）的变量，即$ scope.utc = utcFactory.myUTC，这将在HTML链接。

来源

2016-07-06 00:12:02 domoindal

在你的控制器 -

$scope.utc = utcFactory;

在你看来 -

<span class="tiny">{{utc.myUTC()}}</span>.

来源

2016-07-06 00:46:38 MukulSharma

谢谢，无法正常工作:( –

从视图调用工厂输出

回答

相关问题