我正在尝试从指令模板中调用函数，以将时间转换为可读的内容。我目前正在查看<script>document.write(convertTime({{hour.time}}));</script>实际的转换时间。没有JS错误。
指示：
.directive('hourly', function() {
return {
scope: true,
restrict: 'E',
template: '<div class="hourly_container row" ng-repeat="hour in weather.data" ng-if="(($index % 3) == 0)">' +
'<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">Time: <script>document.write(convertTime({{hour.time}}));</script></div>' +
'<div class="weather_block hourly col-xs-8 col-sm-8 col-md-8 col-lg-8">' +
'<canvas id="weather_icon_{{$index}}" width="128" height="128"></canvas><br />' +
'<span>Temp: {{hour.temperature}} </span><br />' +
'<span> {{hour.summary}} </span><br />' +
'<span>Humidity: {{hour.humidity}} </span><br />' +
'<span>Pressure: {{hour.pressure}} </span><br />' +
'</div>' +
'</div>'
}
});
功能：
function convertTime(time) {
console.log("in convert time");
var d = new Date(time * 1000);
var hours = d.getHours()
var minutes = d.getMinutes()
if (minutes < 10) {
minutes = "0" + minutes;
}
var suffix = "AM";
if (hours >= 12) {
suffix = "PM";
hours = hours - 12;
}
if (hours == 0) {
hours = 12;
}
return "<span>" + d.getMonth() + " " + d.getDay() + "</span> <br />" + "<span>" + hours + ":" + minutes + " " + suffix + "</span";
}
我敢肯定有正确的方法可以做到这一点，但这不是。您可以看到我正在尝试使用此示例进行的操作。
你有几个问题。我不确定您要如何处理返回的数据，但我会让您解决。我还删除了指令中的某些内容，只是为了获得对convertTime服务的调用。
为了调用该函数，您应该将其放入服务中（在这种情况下为工厂）。（我稍作修改是因为您在调用Date时做错了一些事情）：
.factory('myFactory', function() {
return {
convertTime: function() {
console.log("in convert time");
var d = new Date();
var hours = d.getHours()
var minutes = d.getMinutes()
if (minutes < 10) {
minutes = "0" + minutes;
}
var suffix = "AM";
if (hours >= 12) {
suffix = "PM";
hours = hours - 12;
}
if (hours === 0) {
hours = 12;
}
return "<span>" + d.getMonth() + " " + d.getDay() + "</span> <br />" + "<span>" + hours + ":" + minutes + " " + suffix + "</span";
}
}
})
然后，将工厂注入指令中。
您还应该注意，我也必须注入$ sce，因为您的工厂正在返回要显示的标记字符串。默认情况下，Angular保护我们免受呈现潜在有害代码的侵害。如果您是在内部生成此html而用户无法插入任何内容，则可以使用$ sce告诉angular我们信任这一段代码。然后，您需要在要插入该代码的div标签中使用ng-bind-html，否则它将呈现为纯文本而不是html。
.directive('hourly', function(myFactory, $sce) {
return {
scope: true,
restrict: 'E',
template: '<div class="hourly_container row">' +
'<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4" ng-bind-html="convertTime">Time: {{convertTime}} </div>' +
'<div class="weather_block hourly col-xs-8 col-sm-8 col-md-8 col-lg-8">' +
'<canvas id="weather_icon_{{$index}}" width="128" height="128"></canvas><br />' +
'<span>Temp: {{hour.temperature}} </span><br />' +
'<span> {{hour.summary}} </span><br />' +
'<span>Humidity: {{hour.humidity}} </span><br />' +
'<span>Pressure: {{hour.pressure}} </span><br />' +
'</div>' +
'</div>',
link: function(scope) {
scope.hour = {
temperature: 97,
summary: 'some text here for the summary',
humidity: 'Really Humid',
pressure: -92137
}
scope.convertTime = $sce.trustAsHtml('Time: ' + myFactory.convertTime())
}
}
})
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句