AngularJS Isolated Scope and Controller Binding

Question

I am new to Angular and attempting to create a Phone Message Log app using directives. The user inputs a message and clicks the button, and it is displayed in a "Message" log below.

I am trying to get the app to show the date the message as well using a getDate() method within the controller. However, I am finding that whenever I add a new message, all dates are overwritten. I am assuming this is due to shared scope? I am not quite sure how to get around this.

See this fiddle for the example: 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) {


    }

}

})

ms87 · Accepted Answer · 2014-12-19 17:02:11Z

1

This is to do with the logic in which you display messages, every time you type a message the ng-repeat is evaluated again, and the getDate() function is re-evaluated since it's used inside the ng-repeat. You need to find a way to attach the date of the message to the message object itself, have a look at my fork

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

Basically messageLog now a has a list of message objects each of which have their own time and content:

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

the track by expression is needed to let the ng-repeat have a way to distinguish between items to overcome the dupes error.

edited Dec 19, 2014 at 17:02

answered Dec 19, 2014 at 16:57

ms87

17.5k23 gold badges89 silver badges123 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

New Dev Over a year ago

Please add the relevant parts of the solution to the answer (like the addition of a date property, and the addition of track by $index) - good answer otherwise.

thebighoncho Over a year ago

Thanks! Just curious though, how does "track by $index" work?

hjl · Accepted Answer · 2014-12-19 17:02:39Z

0

You shouldn't put getDate together with ng-repeat as it will rerender DOM and evaluate the function when messageLog changes

answered Dec 19, 2014 at 17:02

hjl

2,8023 gold badges20 silver badges26 bronze badges

Collectives™ on Stack Overflow

AngularJS Isolated Scope and Controller Binding

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related