Question

我有一个工作视图，我想优化它。目前这是复杂的方式。问题是我不知道如何做到最好。

在控制器中使用功能？制定指令？

实际上，可以完成的主要优化来自链接。我使用ui.router，我有2个状态：deals.list和deals.list.selected。对于页面的每个链接，参数取决于：

如果选择了交易
当前节点类别是什么，如果我们选择了一个，添加完整路径段可以是1到3个。

它使每一个链接都与ng-if ...

<div>
    <div class="column" style="width:30%;">
        <div ng-if="!vm.defaultNode">
            Affiner par catégorie parent
            <div ng-if="vm.deal">
                <a ng-if="vm.nodeTree.ancestors[0]"
                   ui-sref="deals.list.selected({
                        dealId:vm.deal.id,
                        nodeId:vm.nodeTree.ancestors[0].id,
                        nodeSlug1:vm.nodeTree.ancestors[0].slug,
                        nodeSlug2:null})">{{ node.title }}</a>
                <a ng-if="vm.nodeTree.ancestors[1]"
                   ui-sref="deals.list.selected({
                        dealId:vm.deal.id,
                        nodeId:vm.nodeTree.ancestors[0].id,
                        nodeSlug1:vm.nodeTree.ancestors[0].slug,
                        nodeSlug2:vm.nodeTree.ancestors[1].slug,
                        nodeSlug3:null})">{{ node.title }}</a>
                <a ng-if="vm.nodeTree.ancestors[2]"
                   ui-sref="deals.list.selected({
                        dealId:vm.deal.id,
                        nodeId:vm.nodeTree.ancestors[0].id,
                        nodeSlug1:vm.nodeTree.ancestors[0].slug,
                        nodeSlug2:vm.nodeTree.ancestors[1].slug,
                        nodeSlug3:vm.nodeTree.ancestors[2].slug})">{{ node.title }}</a>
            </div>
            <ul ng-if="!vm.deal">
                <li ng-repeat="(key, node) in vm.nodes.data">
                    <a ui-sref="deals.list({nodeId:node.id,nodeSlug1:node.slug})">{{ node.title }}</a>
                </li>
            </ul>
        </div>

        <div ng-if="!vm.deal">
            <a ng-if="vm.nodeTree.ancestors[0]"
               ui-sref="deals.list({
            nodeId:vm.nodeTree.ancestors[0].id,
            nodeSlug1:vm.nodeTree.ancestors[0].slug,
            nodeSlug2:null})">{{ vm.nodeTree.ancestors[0].title }}</a>
            <a ng-if="vm.nodeTree.ancestors[1]"
               ui-sref="deals.list({
            nodeId:vm.nodeTree.ancestors[0].id,
            nodeSlug1:vm.nodeTree.ancestors[0].slug,
            nodeSlug2:vm.nodeTree.ancestors[1].slug,
            nodeSlug3:null})">{{ vm.nodeTree.ancestors[1].title }}</a>
            <a ng-if="vm.nodeTree.ancestors[2]"
               ui-sref="deals.list({
            nodeId:vm.nodeTree.ancestors[0].id,
            nodeSlug1:vm.nodeTree.ancestors[0].slug,
            nodeSlug2:vm.nodeTree.ancestors[1].slug,
            nodeSlug3:vm.nodeTree.ancestors[2].slug})">{{ vm.nodeTree.ancestors[2].title }}</a>
        </div>
        <div>{{vm.nodeTree.title}}</div>

    </div>

    <div class="column">
        <select ng-model="vm.order" ng-init="vm.order=vm.defaultOrder" ng-change="vm.changeOrderTo(vm.order)">
            <option value="hottest">order by: hottest</option>
            <option value="newest">order by: newest</option>
        </select>

        <ul>
            <li ng-repeat="deal in vm.deals.data">
                <a ng-if="!vm.nodeTree.ancestors[0]"
                    ui-sref="deals.list.selected({
                        dealId:deal.id,
                        nodeId:vm.nodeTree.id,
                        nodeSlug1:vm.nodeTree.slug})">{{ deal.title }}</a>
                <a ng-if="vm.nodeTree.ancestors[0]"
                   ui-sref="deals.list.selected({
                        dealId:deal.id,
                        nodeId:vm.nodeTree.id,
                        nodeSlug1:vm.nodeTree.ancestors[0].slug,
                        nodeSlug2:vm.nodeTree.slug})">{{ deal.title }}</a>
                <a ng-if="vm.nodeTree.ancestors[1]"
                   ui-sref="deals.list.selected({
                        dealId:deal.id,
                        nodeId:vm.nodeTree.id,
                        nodeSlug1:vm.nodeTree.ancestors[0].slug,
                        nodeSlug2:vm.nodeTree.ancestors[1].slug,
                        nodeSlug3:vm.nodeTree.slug})">{{ deal.title }}</a>
                <a ng-if="vm.nodeTree.ancestors[2]"
                   ui-sref="deals.list.selected({
                        dealId:deal.id,
                        nodeId:vm.nodeTree.id,
                        nodeSlug1:vm.nodeTree.ancestors[0].slug,
                        nodeSlug2:vm.nodeTree.ancestors[1].slug,
                        nodeSlug3:vm.nodeTree.ancestors[2].slug})">{{ deal.title }}</a>
            </li>
        </ul>
    </div>
</div>

Answer 1

没有正确或错误的答案，但由于你涉及模板html，我会转向指令。但是，如果我这样做，我会使用Googles Polymer在Angular中实现它。 Polymer现在可以使用shadow DOM。这种思维类似于Angular指令，允许部分HTML被模板化。值得一看。相比指令的优点是你不会得到一个控制器文件和一个模板文件和一个css文件，但可以在一个影子DOM封装的解决方案中完全抛出它。

优化此视图的最佳方法是什么？

1 个答案: