javascript - AngularJS 中的单向绑定(bind) + 动态绑定(bind)

Question

我将首先解释我们想要实现的目标。

我们刚刚 catch 了 Angular 的潮流，并正在用它构建一个原型(prototype)来看看它的能力。

当前服务器上有大量数据(在本例中为成绩)，我们使用 Angular 显示该数据。

以下是我们使用的代码:

<ul class="phones">
    <li class="list-group-item" onclick="toggleExpandedView(this, true, 500)" ng-repeat="grade in grades | filter:query | orderBy:orderProp">

        <span ng-show="grade.comment"><img src="../Content/images/comment.gif"/></span>

        <a class="btn btn-primary editButton" style="float: right; position: absolute; right:10px;" ng-href="#/grades/{{grade.gradeId}}">Edit</a>

        <div class="heading1"><a ng-href="{{grade.url}}" target="_blank">{{grade.gradeValue}}</a></div>
        <div>Provided by <a href="#">{{grade.assessorFirstname}} {{grade.assessorLastname}}</a> on {{grade.dateModifiedFormatted}} </div>

        <div class="expandedGrade" onclick="childDivClick(event)" style="display: none" id="grade-{{grade.gradeId}}">
            <label>Attachments</label>{{grade.attachmentCount}}
            <br />

            <span ng-hide="editing" ng-click="editing = true"><b>{{grade.comment || 'No comments yet'}}</b></span>
            <form ng-show="editing" ng-submit="editing = false">
                <input type="text" ng-model="grade.comment" placeholder="Comment" ng-required />
                <br />
                <input id="saveChanges" type="submit" class="btn btn-primary" ng-click="saveChanges(this, grade)" text="Save changes" />
            </form>

        </div>
    </li>
</ul>

如您所见，我们有一个父级 ul，对于 grades 中的每个 grade，我们只显示一个 li > 和一个隐藏的 div，当您单击 li 时，我们使用 jQuery 来制作动画并显示隐藏的 div。在子 div 中，我们有一个注释字段，用户可以更新该字段并单击保存。保存时，当前对象会被发送回服务器，但是我们担心 Angular 必须遍历所有 2000 个等级，直到找到我们正在更新的对象(由于双向绑定(bind))，这意味着一切都将是真正的速度慢，我们负担不起。

这就是我们想要实现的目标:

1 我们希望以一种方式绑定(bind)数据，以便我们可以在屏幕上显示所有成绩的列表，并且一旦它们全部显示出来，我们就希望以某种方式删除绑定(bind)。

2. 当用户更新特定等级的评论时，我们希望动态绑定(bind)该特定等级，以便 Angular 确切地知道它必须更新哪一个，而不必遍历整个集合2000+ 成绩。

我找到了tutorial但是我仍然不确定如何将其集成到我的代码中。

我也看过this video我理解它背后的概念，但我再次努力编写一些实际有效的东西(我们刚刚开始使用 Angular，所以我几乎是一个新手)

有人能给我指出正确的方向并为我提供一些可以解决我们面临的问题的代码示例吗？任何建议和帮助将不胜感激

Answer 1

您始终可以使用指令

逻辑应该是这样的

• 使用服务来保存您的成绩

• 将服务注入(inject)到您的指令中

• 制作副本并在指令中绑定(bind)“只读 View ”

• 您可以监视服务的更改并根据需要进行更新在你的指令中

• 至于需要时的延迟加载/更新 - 使用数据服务并在触发器触发时调用数据服务进行更新

• 如果您的触发器需要来自其他“网络服务”的推送，请考虑采用一种技术像http://socket.io/

如果您想了解服务和指令应如何交互，我可以整理一个示例