Question

我有一个使用AngularJS和UI-Router的网站。为了有一个单独的登录页面（未注入主视图），我将index.html（包括布局和脚本包括）分离为index.html（仅包含脚本）和布局。根据{{3}}的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>

的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来显示我的问题： AngularJS UI-Router multiple pages

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

Answer 1

你的问题是时间问题。您的脚本在窗口加载时运行，而不是在您的状态加载完毕后运行。 I.E.在运行脚本时，您要查找的元素（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时元素绑定的问题

1 个答案: