AngularJS隔离的作用域和控制器绑定

AngularJS Isolated Scope and Controller Binding

本文关键字：控制器 绑定 作用域 隔离 AngularJS      更新时间：2023-09-26

我是 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 并评估函数

相关文章：