Question

我需要从视图中访问var 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 var，当我尝试使用控制台日志进行测试时，我看不到它。

我试图使用它来访问它 {{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>

Answer 1

您无法直接访问utc var。你定义了一个名为'myUTC'的函数，它返回 utc 的值。

在您的控制器中，您必须拨打$ cocos run test -p android，这将返回“ utc ”的值。

编辑：

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

Answer 2

在你的控制器中 -

$scope.utc =  utcFactory;

在您看来 -

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

Answer 3

您只需要调用工厂方法并将值归因于$scope变量。

这是一个示范工作：

＆＃13;

(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
        }
    });
})();

＆＃13;

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

＆＃13;

我希望它有所帮助。

从视图中调用工厂的输出

3 个答案: