Angular Ui-Router 标签定位答案

【问题标题】：Angular Ui-Router tag positioningAngular Ui-Router 标签定位
【发布时间】：2017-04-11 20:08:19
【问题描述】：

我有一个奇怪的 ui-router 设置。请允许我不好说明，因为它是一个非常复杂的布局。（想想 Google 图片搜索/展开）当点击 item 时，ng-if = true 并在行下方显示项目详细信息。

category //horizontal row of items
    ----------------------
    item item item etc
    ----------------------

    <ui-view ng-if="item-equals-category"> //ui-view under horizontal row

category
    ----------------------
    item item item etc
    ----------------------

    <ui-view ng-if="item-equals-category2>

我遇到的问题是：尽管通过 ng-if 隐藏，但包含的代码执行了 21 次（21 行）。这给 Google API 之类的东西带来了问题，因为它对 API 进行了 21 次调用并被阻止。有没有办法在没有 21 个 ui 视图的情况下进行这种布局。仅在选定项目行下插入一个 UI 视图。

【问题讨论】：

如果所有的 ui-views 都不在 dom 中，直到单击 item 然后显示一个，为什么会有 21 个调用？
我就是这么想的。那是ng-if 的预期行为不？也许我用来评估 ng-if 的函数是错误的。它们不显示，但里面的资源正在加载。我检查以确保没有ng-hide，并且可以确认我正在使用ng-if
@elpddev 感谢您的评论。你向我保证我做得对，我检查了我的 ng-if。发生的事情是ui-view 上的那个失败了，然后一个 inside 视图有效地捕获了阻塞视图，但没有捕获模板顶部的脚本...已修复。谢谢！
看起来像这个问题：stackoverflow.com/questions/29120637/…
我仍然不确定你为什么要为你的porpuse 使用ui-view。您正在寻找的似乎是一个 cusotm 指令，该指令将被单击的项目作为属性输入，然后执行诸如收集和显示特定项目的数据之类的操作。如果你想通过 url 来反映你点击的项目，你可以通过 $state.transitionTo 和 location: replace 并在其中设置项目 id 的参数来实现。

标签： javascript angularjs angular-ui-router

【解决方案1】：

感谢所有导致此答案的反馈。发生的事情是我在加载到 ui-view 的内容中的脚本标签中编写我的 JS。如果 JS 在内容中，它将被评估。 ng-if 仅在以正确的“Angular 方式”（即指令中的方式）完成时才会阻止代码的执行。

将执行：

<div ng-if="false">
    <script>
        console.log("in HTML")
    </script>
</div>

不会执行：

myApp.directive('shouldntAppear', function () {
        return {
            template: "Shouldn't appear",
            link: function(){
                console.log('from directive');
            }
        };
    });
<div class="test" shouldnt-appear ng-if="false">
</div>

查看此CodePen 并设置 ng-if true/false 以查看控制台中的差异。

【讨论】：