1

大家好，感谢阅读。我有一组客户端文本简介，我想使用 ng 提供视图。我的问题是，尽管我觉得我的设置正确，但我只在第二个视图上看到第一个视图的重复，并且在第一个视图锚点上失去了更改文本简介的功能。我想知道是否有人可以为我解释一下。自从我做任何 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> 有人可以帮我/指导我格式化代码吗，在我的第一个声明行之后它似乎不会接受代码行 - sry 仍然有点新。我必须添加一个片段，才能成功发布 - （我是菜鸟）

粗鲁:)

4

0 回答 0