使用 AngularJS UI-Router 时元素绑定问题

Question

我有一个站点正在使用 AngularJS 和 UI-路由器。为了有一个单独的登录页面（不注入主视图），我将 index.html（包括布局和脚本）分成 index.html（仅包括脚本）和 layout.html（仅布局）根据 AngularJS UI-Router multiple pages。

但是我的问题是 script.js 文件中有很多 UI-逻辑（主题是买的），当我拆分我的 index.html 时，然后scripts.js 文件中的 UI 元素在 layout.html 文件中不起作用。

Index.html

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
    <head>
        <link rel="stylesheet" href="style.css" />
    </head>
    <body>
        <div ui-view></div>
        <!-- Angular, JQuery and App specific scripts -->
        <script src="script.js"></script>
    </body>
</html>

Layout.html

<div>
    <!-- Navigation layout that requires functions in script.js and some controller layout (showing currently logged in user) -->
    <div ui-view></div>
</div>

我创建了一个 Plunker 来展示我的问题： http://plnkr.co/edit/O1G179cu5AZeVURxPgPq?p=preview

是否可以像我一样拆分索引，并在布局中仍然使用 script.js 文件？

Answer 1

你的问题是时间问题。您的脚本运行就在 window 加载时，而不是在您的状态完成加载时。 IE。当时脚本是运行你要找的元素（layoutColor）不存在，它还没有被渲染。

你需要做的是确保脚本在运行状态改变后。最简单的方法可能是在每次路由更改后触发 script.js，但如果您不希望它一直处于运行，您也可以在每个控制器中执行此操作。

不过，我建议使用 $viewContentLoaded 事件来执行此操作。此事件在视图加载完成后触发，如果您始终想触发脚本，则可以将其绑定到 rootScope 上。请注意，即使在这种情况下，如果您在加载视图后向 DOM 添加内容，也可能需要手动触发它。

app.run(['$rootScope', function ($rootScope) {
    $rootScope.$on('$viewContentLoaded ', function(){
        // Trigger the script
    })
}]);

您将需要创建一种手动触发 script.js 的方法，具体操作方法在很大程度上取决于您实际拥有的内容，因此我无法对此发表评论。

编辑

更改为 $viewContentLoaded 而不是 $stateChangeSuccess，因为前者总是运行在 DOM 加载后，因此不需要任何超时。

使用 AngularJS UI-Router 时元素绑定问题

Problems with element binding when using AngularJS UI-Router

javascript

jquery

angularjs

angular-ui-router