0

我正在尝试结合 angular 和前端框架实现，因为我发现它比 angular-material 更好。以下代码有效并产生视差滚动示例：

<html lang="en">


<head>

  <link href="css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection"/>
  <link href="css/style.css" type="text/css" rel="stylesheet" media="screen,projection"/>


    <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script src="bower_components/angular/angular.min.js"></script>
    <script src="js/materialize.js"></script>
    <script src="js/init.js"></script>

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

</head>
        <body ng-app='angularApp'>
         (...)
      <div class="parallax-container">
          <div class="parallax"><img src="http://i3.minus.com/ibdMPM9Oo2TGYu.png" ></div>
      </div>
      <div class="section white">
          <div class="row container">
              <h2 class="header">Parallax</h2>
              <p class="grey-text text-darken-3 lighten-3">Parallax is an effect where the background content or image in this case, is moved at a different speed than the foreground content while scrolling.</p>
          </div>
      </div>
      <div class="parallax-container">
          <div class="parallax"><img src="http://i3.minus.com/ibdMPM9Oo2TGYu.png" ></div>
      </div>    


      </body>
    </html>

但是，当我将其“重构”为自定义指令时，这种视差效果会完全停止工作，如下所示：

 <html lang="en">
        (...)
        <body ng-app='angularApp'>
         (...)
           <hometab></hometab>

          </body>
        </html>

///////

(function(){
    var app = angular.module("angularApp", []);


app.directive('hometab', function(){
    return{
        restrict: 'E',
        templateUrl: 'hometab.html'

    };
});

})();

（hometab.html 包含以前在主 html 中的代码）。

为什么这会破坏代码？

编辑：澄清一下，打破我的意思是插入了代码，但视差效果不起作用（我假设javascript没有正确完成它的工作？）

4

2 回答 2

0

尝试将您的指令包装在一个 div 中，看看它是否有效。IE<div hometab></div>

于 2015-05-01T22:05:09.113 回答
0

几天前我遇到了这个问题，我要解决这个问题只是将 transclude 设置为 true，并将 replace 设置为 true。如果你的代码是这样的。

(function(){
    var app = angular.module("angularApp", []);

    app.directive('hometab', function(){
        return{
            restrict: 'E',
            templateUrl: 'hometab.html',
            transclude : true,
            replace : true
        };
    });
})();
于 2015-05-20T10:54:19.610 回答