我是 Angular 的新手,并尝试使用指令创建电话消息日志应用程序。用户输入消息并单击按钮,该消息将显示在下面的"消息"日志中。
我正在尝试让应用程序使用控制器中的 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) {
}
}
})
显示消息的逻辑有关,每次键入消息时,都会再次评估ng-repeat
,并且重新计算getDate()
函数,因为它在ng-repeat
中使用。你需要找到一种方法将消息的日期附加到消息对象本身,看看我的叉
<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-repeat具有区分项目以克服重复错误的方法。
你不应该把getDate
和ng-repeat
放在一起,因为它会在messageLog
更改时重新渲染 DOM 并评估函数