0

angular-materialよりも優れていることがわかったので、angularとフロントエンドフレームワークのマテリアライズを組み合わせようとしています。次のコードが機能し、視差スクロールのサンプルが生成されます。

<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 でラップしてみて、動作するかどうかを確認してください。いえ<div hometab></div>

于 2015-05-01T22:05:09.113 に答える