Currently, I am diving into Angular and endeavoring to develop a Phone Message Log application utilizing directives. The concept is simple - the user inputs a message, clicks a button, and it gets displayed in a "Message" log below.
The challenge I'm facing is incorporating the date of the message using a getDate() method within the controller. However, I observe that each time a new message is added, all dates get overwritten. My assumption is that this issue stems from shared scope, but I'm unsure how to resolve it.
To see an example, check out this fiddle: 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) {
}
}
})