Как вызвать функцию из угловой директивы

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

Для того, чтобы вызвать функцию, вы должны поместить его в сервис (или завод, в данном случае). (Я изменил его немного, потому что вы делали какие-то неправильные вещи с вызовом Дата):

.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, потому что ваша фабрика возвращает строку разметки, которую вы собираетесь отображать. Угловая по умолчанию защищает нас от потенциально опасного кода. Если вы создаете этот html внутри, не имея возможности вставлять что-либо, тогда можно использовать $ sce, чтобы сказать, что мы доверяем этому фрагменту кода. Затем вам нужно использовать ng-bind-html в теге div, который вы хотите вставить в этот код, иначе он будет выглядеть как обычный текст, а не 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()) 
       } 
     } 

}) 

Answer 2

Вы должны поместить свою функцию в сервис, а затем вы можете ввести службу в свою директиву и использовать эту функцию. Что-то вроде этого:

angular.module('myApp').factory('$utilTime', [function() { 

$utilTime.convertTime = function(time) { 
    //your code 
    }; 

    return $utilTime; 
}]); 

Затем вводят в нашу директиву:

.directive('hourly', function($utilTime) { 

Вы можете добавить контроллер к директиве и установите значение из вашей функции в области видимости переменных, которые затем можно использовать в ваш шаблон.