Angular JS，将范围属性绑定到函数答案

【问题标题】：Angular JS, bind scope property to functionAngular JS，将范围属性绑定到函数
【发布时间】：2015-12-06 23:10:03
【问题描述】：

我是 Angular JS 的新手。我正在创建一个将数据存储在网络存储中的应用程序。提交查询表单时，它会从 Web 存储中获取当前数组，对新的表单数据进行排序，将其添加到数组中，然后将其发送回 Web 存储。效果很好，所有内容都正确保存。

$scope.submit = function () {
   // get object from form data
    var formData = { firstName: $scope.firstName, lastName: $scope.lastName, date: getDateFromatted(), posted: false };
    addStoredData(formData, ENQUIRY_STORE);
}

function getStoredData(storeName) {
    // get or create enquiry store
    var storedData = (typeof localStorage.getItem(storeName) !== 'undefined' && localStorage.getItem(storeName)) || "[]";

    // parse store into object
    storedData = JSON.parse(storedData);

    return storedData;
}

function addStoredData(data, storeName) {
     var storedData = getStoredData(storeName);
     var count = storedData.length;

     // form data into next submission slot
     storedData[count] = data;

     // turn back into JSON
     storedData = JSON.stringify(storedData);

     // slap it back in web storage
     localStorage.setItem(storeName, storedData);
}

在我的 HTML 页面上有这个；

<table>
    <tr>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Date</th>
    </tr>

    <tr ng-repeat="e in enquiries">
        <td>{{ e.firstName }}</td>
        <td>{{ e.lastName }}</td>
        <td>{{ e.date }}</td>
    </tr>
</table>

所以我希望能够做到这一点......

// list of stored enquiries
$scope.enquiries = function () {
    return getStoredData(ENQUIRY_STORE);
}

但它没有绑定，也没有行。如果我这样做......

$scope.enquiries = getStoredData(ENQUIRY_STORE);

它有效，但是当提交新查询时我必须继续设置它。也许 Anulgar 不允许您使用函数来返回数据以进行绑定，但我认为确实如此。

非常感谢任何帮助。谢谢。

【问题讨论】：

对我来说看起来很合乎逻辑。目前，当它是一个函数时，您不会触发 $scope.enquiries。
您应该首先将数据列表存储到 $scope 对象中，并确保您的“添加”和“删除”功能不仅会影响 localStorage，还会影响 $scope 对象。

标签： angularjs local-storage

【解决方案1】：

在第一种方式 ($scope.enquiries = function() ...) 中，它不会绑定，因为您正在对函数进行 ngRepeat（它不会引发错误，因为函数实际上具有长度）。

但是，即使您执行了<tr ng-repeat="e in enquiries()">，您也会遇到无限摘要错误，因为 enquiries() 每次都返回不同的对象，而 angular 正在等待两次相同的结果以停止摘要循环。

最好的办法是：

$scope.submit = function() {
  ...
  setEnquiries();
}

...

function setEnquiries() {
  $scope.enquiries = getStoredData(ENQUIRY_STORE);
}

并继续循环查询：

<tr ng-repeat="e in enquiries">

【讨论】：

明白，感谢您的解释 - 现在运行良好。

【解决方案2】：

$scope.selectedENQUIRY_STORE = null;
$scope.getStoredData= function (e) {
    $scope.selectedENQUIRY_STORE = e;
};

当您点击姓名上的查询表单时，它会绑定

【讨论】：

【解决方案3】：

您只需在提交时再次检索数据，因此将您的 $scope.enquiries() 函数移动到您的 $scope.submit() 函数中。

$scope.submit = function () {
   // get object from form data
    var formData = { firstName: $scope.firstName, lastName: $scope.lastName, date: getDateFromatted(), posted: false };
    addStoredData(formData, ENQUIRY_STORE);

// FIRE UP THE FUNCTION
$scope.enquiries();
}

请注意，您应该将 getStoredData() 和其他与数据相关的函数放入 Angular 服务中。

幸运的是，已经有一个很好的模块来处理 LocalStorage 操作： https://github.com/tymondesigns/angular-locker

【讨论】：