Question

我正在尝试向ui-view中的div添加动画。但看起来jquery并没有影响我的div。当我将ui-view之外的div直接添加到index.html时，它正在工作。但是当div在ui-view中的html文档中时它不会起作用。 ui-router工作得非常好，虽然我也可能因为下面的代码被最小化而错过了。

的index.html

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="app.js"></script>
<script src="animations.js"></script>
</head>
<body ng-app="animateApp">
   <a ui-sref="slideshowdocument"></a>
   <div ui-view></div>
</body>
<html>

slideshowdocument.html

<div id="animatethis">
<!-- slideshow stuff -->
</div>

app.js

var animateApp = angular.module('animateApp', [
'ui.router',
'ngAnimate'
]);

animateApp.config(function($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/home');
     $stateProvider 

.state('slideshowdocument', {
        url: '/slideshow',
        templateUrl: 'pages/slideshowdocument.html'
    });

animations.js

//animations here

我甚至试过这个，所以animations.js与ui-view同时加载。

的index.html

 <html>
 <head>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
 <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="app.js"></script>
 <div ui-view="animationshere">

 </head>
 <body ng-app="animateApp">
   <a ui-sref="slideshowdocument"></a>
   <div ui-view="documenthere"></div>
 </body>
 <html>

script.html

  <script src="animations.js"></script>

app.js

    .state('slideshowdocument', {
    url: '/slideshow',
    views: {
        'animationshere': { templateUrl: 'pages/slideshowdocument.html'},
       'documenthere': { templateUrl: 'pages/script.html'}

     }
    });

Answer 1

我找到了解决方案。

我尝试添加

 <script src="animations.js"></script>

到slideshowdocument.html

我之前用html代码添加它时没用。当我在html代码之后添加时工作了。这可能是因为代码执行时div仍然不存在。不是最好的解决方案，因为我必须为我希望使用它的ui-view的每个状态加载animations.js。

如何让JQuery影响ui-view中的div？

1 个答案: