こんにちは、読んでくれてありがとう。ngを使用してビューをフィードしたいクライアント側のテキスト宣伝文句のセットがあります。私の問題は、これが正しく設定されていると感じていますが、2 番目のビューで最初のビューの繰り返ししか表示されず、最初のビュー アンカーでテキスト ブラーブを変更する機能が失われていることです。誰かが私のためにそれに光を当てることができるかどうか疑問に思っていました. angularJS をやってからしばらく経ちましたが、レンガ造りの壁がどれほど楽しいか忘れていました。以下にapp.jsコードを投稿します
var animateDesign = angular.module('animateDesign', ["ngAnimate", "ngRoute"]);
animateDesign.config(['$routeProvider', function($routeProvider){
$routeProvider.
when('/background', {templateUrl: './assets/views/design/background.html',
css: ['./assets/vendor/bootstrap-3.2.0-dist/css/bootstrap.min.css', 'assets/css/after_bs.css']}).
when('/logo', {templateUrl: './assets/views/design/logo.html',
css: ['./assets/vendor/bootstrap-3.2.0-dist/css/bootstrap.min.css', 'assets/css/after_bs.css']}).
when('/branding', {templateUrl: './assets/views/design/branding.html',
css: ['./assets/vendor/bootstrap-3.2.0-dist/css/bootstrap.min.css', 'assets/css/after_bs.css']}).
when('/illustration', {templateUrl: './assets/views/design/illustration.html',
css: ['./assets/vendor/bootstrap-3.2.0-dist/css/bootstrap.min.css', 'assets/css/after_bs.css']}).
when('/print', {templateUrl: './assets/views/design/print.html',
css: ['./assets/vendor/bootstrap-3.2.0-dist/css/bootstrap.min.css', 'assets/css/after_bs.css']}).
when('/web', {templateUrl: './assets/views/design/web.html',
css: ['./assets/vendor/bootstrap-3.2.0-dist/css/bootstrap.min.css', 'assets/css/after_bs.css']}).
otherwise({redirectTo: '/background'});
}])
.animation('.reveal-animation-design', function($scope) {
return {
enter: function(element, done) {
element.css('display', 'none');
element.fadeIn(1500, done);
return function() {
element.stop();
}
},
leave: function(element, done) {
element.fadeOut(1500, done)
return function() {
element.stop();
}
}
}
});
angular.bootstrap(document.getElementById("animatePrint"), ['animatePrint']);
var animatePrint = angular.module('animatePrint', ["ngAnimate", "ngRoute"]);
animatePrint.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/litho', {templateUrl: './assets/views/print/litho.html',
css: ['./assets/vendor/bootstrap-3.2.0-dist/css/bootstrap.min.css', 'assets/css/after_bs.css']}).
when('/digital', {templateUrl: './assets/views/print/digital.html',
css: ['./assets/vendor/bootstrap-3.2.0-dist/css/bootstrap.min.css', 'assets/css/after_bs.css']}).
when('/other', {templateUrl: './assets/views/print/other.html',
css: ['./assets/vendor/bootstrap-3.2.0-dist/css/bootstrap.min.css', 'assets/css/after_bs.css']}).
otherwise({redirectTo: '/litho'});
}])
.animation('.reveal-animation-print', function() {
return {
enter: function(element, done) {
element.css('display', 'none');
element.fadeIn(1500, done);
return function() {
element.stop();
}
},
leave: function(element, done) {
element.fadeOut(1500, done)
return function() {
element.stop();
}
}
}
});失明をデバッグするだけで、おそらく最も単純なことかもしれないので、html実装も投稿します
<div class="col-md-6">
<div class="container">
<div ng-app="animateDesign">
<div class="wrapper">
<div ng-view class="reveal-animation-design">
This is the background area
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--/.container-->
</div>
<!--/#design-->
<div id="print" class="page-section">
<div class="container">
<h2> Print </h2>
<div class="row">
<div class="col-md-3 no-float">
<!--start Vertical Header Test-->
<nav class="navbar navbar-left" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-nav">
<button type="button" id="nav-toggle" class="navbar-toggle" data-toggle="collapse" data-target="#alt-nav">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"><img src="assets/img/png/dd-logo-basic-sm.png"/></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div id="alt-nav" class="collapse navbar-collapse">
<ul class="nav navbar-left">
<li><a href="#/litho">litho</a></li>
<li><a href="#/digital">digital</a></li>
<li><a href="#/other">other</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
</div>
<div class="col-md-6 no-float">
<div class="container">
<!--this is not showing on the page TODO: animatePrint needs to show on page, before using id="animatePrint" and having a default otherwise call to be the background-->
<div id="animatePrint">
<div class="wrapper">
<div ng-view class="reveal-animation-print">
</div>
</div>
</div>
</div>
</div>
</div>
<!--/.row-->
</div>
<!--/.container-->
</div>
<!--/.print-->これに光を当てる助けを前もってありがとう。乾杯、読んでくれてありがとう:)
PS>誰かが私を助けてくれますか/コードをフォーマットするように案内してくれませんか?最初に宣言された行の後にコード行を受け入れないようです-まだ少し新しいです。投稿を成功させるには、スニペットとして追加する必要がありました-（私は初心者です）
ぐちゃぐちゃ:)