Question

我试图从我的指令模板中调用一个函数来将时间转换为可读的东西。我目前看到<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";
}

我确定这是一种正确的方法，但事实并非如此。你可以看到我试图用这个例子做的事情。

Answer 1

你有一些问题。我不确定你要回复的数据是什么，但我会让你解决这个问题。我还为你的指令删除了一些东西，只是为了获得对convertTime服务的调用。

Plunker

为了调用该函数，您应将其放入服务（或工厂，在本例中）。（我稍微修改了一下，因为你在调用Date时做了一些错误的事情）：

然后将工厂注入指令。

你还应该注意我也必须注入$ sce，因为你的工厂正在返回你想要显示的一串标记。 Angular默认保护我们免受可能有害的代码呈现。如果你在内部生成这个html而没有用户可以插入任何内容，那么可以使用$ sce告诉angular我们相信这段代码。然后，您需要在要插入该代码的div标记中使用ng-bind-html，否则它将呈现为纯文本而不是html。

.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";
    }
  }
})

如何从Angular指令调用函数

1 个答案: