AngularJS隔離範圍和控制器綁定

我是Angular的新手，嘗試使用指令創建電話留言日誌應用程序。用戶輸入消息並單擊該按鈕，並將其顯示在下面的「消息」日誌中。AngularJS隔離範圍和控制器綁定

我想讓應用程序顯示消息的日期以及使用控制器內的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) { 


    } 

} 

})

來源

2014-12-19 dgalati54

這與在其中顯示消息的邏輯做，每次鍵入消息的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()});

需要通過表達軌道讓NG-重複有辦法項克服愚弄誤差之間進行區分。

來源

2014-12-19 16:57:11

請解決方案的相關部分添加到應答（如添加日期屬性，而通過$ index添加'track'） - 否則就是很好的答案。 –

謝謝！只是好奇而已，「按指數追蹤」工作如何？ – dgalati54

你不應該把getDate連同ng-repeat，因爲這將重新呈現DOM和評估功能時messageLog改變

來源

2014-12-19 17:02:39 elaijuh

AngularJS隔離範圍和控制器綁定

回答

相關問題