使用AngularJS UI路由器时出现元素绑定问题

Problems with element binding when using AngularJS UI-Router

本文关键字：元素 绑定 问题 AngularJS UI 路由器 使用      更新时间：2023-09-26

我有一个使用AngularJS和UI路由器的网站。为了有一个单独的登录页面（不注入主视图），我根据AngularJS UI Router的多个页面将index.html（包含布局和脚本）分离为index.html（仅包含脚本）和layout.html（仅包含布局）。

然而，我的问题是，我在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>

布局.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文件？

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

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

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

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

你需要创建一种手动触发script.js的方法，如何做到这一点在很大程度上取决于你实际拥有的内容，所以我无法对此发表评论。

编辑

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

相关文章：