AngularJS Изолированная область и привязка контроллера

Question

Я новичок в Angular и пытаюсь создать приложение Phone Message Log с помощью директив. Пользователь вводит сообщение и нажимает кнопку, и он отображается в журнале «Сообщение» ниже.

Я пытаюсь получить приложение, чтобы показать дату сообщения, также используя метод getDate() в контроллере. Тем не менее, я нахожу, что всякий раз, когда я добавляю новое сообщение, все даты перезаписываются. Я предполагаю, что это связано с общим объемом? Я не совсем уверен, как обойти это.

Смотрите эту скрипку для примера: http://jsfiddle.net/dgalati/qpo87d31/

<div ng-controller="AppCtrl"> 
<phone number="000 000 0000" make-call="addToMessageLog(number, message)"></phone> 
<h1>Message Log</h1> 

<li ng-repeat="message in messageLog"><b>Date:</b> {{getDate()}} <b>Message:</b> {{message}}</li> 
</div> 

var app = angular.module("phoneApp", []) 

app.controller("AppCtrl", function ($scope) { 
$scope.getDate = function() { 
    return new Date(); 
} 
$scope.messageLog = []; 

$scope.addToMessageLog = function (number, message) { 

    //alert(number + " " + message) 
    //alert(message); 
    $scope.messageLog.push(message); 
    for (var x = 0; x < $scope.messageLog.length; x++) { 
     console.log($scope.messageLog[x]); 

    } 
} 

}) 


app.directive("phone", function() { 
return { 
    restrict: "E", 
    scope: { 
     number: "@", 
     network: "=", 
     makeCall: "&" 
    }, 
    template: '<input type="text" ng-model="value" style="width:350px;">' + 
     '<div class="button" ng-click="makeCall({number:number, message:value})">Call {{number}}  and leave a message</div>', 
    link: function (scope, element, attrs) { 


    } 

} 

}) 

Answer 1

Это связано с логикой, в которой вы отображать сообщения, каждый раз, когда вы набираете сообщение ng-repeat вычисляется снова и функция getDate() повторно -оценен, поскольку он используется внутри ng-repeat. Вам нужно найти способ, чтобы прикрепить дату сообщения на сам объект сообщения, посмотрите на мой fork

<li ng-repeat="message in messageLog track by $index"><b>Date:</b>  
{{message.date}} <b>Message:</b> {{message.content}} 
    </li> 

В основном messageLog теперь имеет список объектов почтовых сообщений, каждый из которых имеет свое собственное время и содержание:

$scope.messageLog.push({content:message,date:new Date()});

трек экспрессией необходимо, чтобы позволить нг-повторение есть способ различать предметы, чтобы преодолеть ошибки простофиль.

Answer 2

Вы не должны ставить getDate вместе с ng-repeat, как это будет засавить DOM и оценить функцию, когда messageLog изменения