javascript - 我应该在 AngularJS 中的哪里存储与模型相关的 View 数据？

Question

我正在使用以下 isText 属性在我的 View 中在下拉列表和文本输入字段之间切换(ng-click="family .isText = !family.isText" 和 ng-show)，同时迭代所有字体系列。

font = {
    name: null,
    style: null,
    families: [{
        name: null,
        parent: null,
        isText: true // <--
    }]
};

这是我正在使用的模板:

<p  ng-repeat="family in file.font.families"
    ng-init="family.textInput = false">

        <!-- Default families input is selection -->
        <select ng-model="file.font.families[$index].name"
                ng-hide="family.textInput"
                ng-change="updateMainFamily($parent.$index, $index)">

            <option disabled value="">— Famille</option>
            <option ng-repeat="family in familiesList"
                    ng-value="family">

                {{ _.capitalize(family) }}
            </option>

        </select>

        <select ng-model="file.font.families[$index].parent"
                ng-hide="family.textInput">

            <option disabled value="">— Grande famille</option>
            <option ng-repeat="mainFamily in mainFamiliesList"
                    ng-value="mainFamily"
                    ng-selected="file.font.families[$parent.$index].parent == mainFamily">

                {{ _.capitalize(mainFamily) }}
            </option>

        </select>

        <!-- But can be switched to text input (ex: for adding a new family)  -->
        <input  type="text"
                class="family"
                ng-model="file.font.families[$index].name"
                ng-show="family.textInput">

        <input  type="text"
                class="family"
                ng-model="file.font.families[$index].parent"
                ng-show="family.textInput">

        <!-- ... with these buttons -->
        <button class="alt small"
                ng-click="family.textInput = !family.textInput"
                ng-hide="family.textInput">

            <i class="fa fa-terminal"></i>
        </button>
        <button class="alt small"
                ng-click="family.textInput = !family.textInput"
                ng-show="family.textInput">

            <i class="fa fa-list"></i>
        </button>
</p>

当用户保存模型时，我不想将此类数据发送到后端，因为它只在 View 上下文中有意义。另一方面，我发现创建类似 familiesState 的属性来存储它们并不方便。

在 AngularJS 中存储模型相关 View 数据的良好、简洁的方法是什么？

Answer 1

我认为你可以为此使用一种内容提供程序。并将其发送到您的后端。

你可以这样做:

(function() {
'use strict';
angular.module('some.module')
    .factory('myFontContentProvider', [contentProvider]);

function contentProvider() {
   var content = this;
   var name = null;
   var style = null;
   var families: [{
       name: null,
       parent: null
   }]

   content.setName = function(n) {
        name = n;
   }
   content.getName = function() {
        return name;
   }

   /* continue with your getters and setters here */

   return content;
}

然后在你的 Controller 中，你可以像这样使用你的工厂进行映射:

(function() {
'use strict';
angular.module('some.module')
    .controller('yourController', ['myFontContentProvider',yourCtrl]);

function yourCtrl(contentProvider) {
   var vm = this;
   /* mapping here */
   vm.getName = contentProvider.getName;
   vm.setName = contentProvider.setName;
   /* etc */
}

最后在你的 DOM 中你有这个:

<div ng-controller="yourController as ctrl"
<!-- to get your value -->
<span ng-bind="ctrl.getName()"></span>
<!-- etc --> 

使用一些 ng-click="ctrl.setYOURPROPERTY()"来调用工厂函数并设置一个值