0

ng-init 値に基づいて、部分的な html ファイルのスタイルを非表示、表示、または変更しようとしています。

私のパーシャルは次のとおりです。

<article class="preview {{size}}" ng-if="desktop">
    <a class="cover absolute" style="background-image:url(/images/samples/sample-image.jpg);">
        <div class="post-info absolute full-width padding">
            <h2 ng-if="artist" class="text-center">band name</h2>
            <h3 class="post-title section-spacer" ng-if="!artist">title of news artcle <span>2hrs</span></h3>
            <p ng-if="caption==true; !artist" class="post-caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud</p>
        </div>
        <div class="post-preview-gradient"></div>
    </a>
</article>

メインの html ページには、次の設定があります。

        <div class="row push-to-11 small-up-1 medium-up-2 large-up-3 section-spacer-large">
            <div class="column" ng-init="size='threequart-padding-bottom'; artist = true; " ng-include="'/partials/elements/posts/post-preview-regular.html'"></div>
            <div class="column" ng-init="size='threequart-padding-bottom'; artist = false; " ng-include="'/partials/elements/posts/post-preview-regular.html'"></div>
</div>

どちらも現在、あたかも のように属性を取得していますartist = false。

いつ、いつ ng-init を使用しないかについて複数の記事を読みましたが、これが各 div で更新されない理由についてまだ混乱しています。このパーシャルを複数のページで使用しているため、パーシャルとして含めることは理にかなっています。

4

1 に答える 1

0

代わりにカスタム ディレクティブを使用します。

var directive = function() {
  return {
    restrict: 'EA',
    scope: {
      artist: '=',
      size: '='
    },
    templateUrl: '/partials/elements/posts/post-preview-regular.html'
  };
};

var module = angular.module('moduleName', [])
    .directive('directiveName', directive);

次に、マークアップは次のようになります (ディレクティブ モジュールをメイン モジュールに適切に登録した後)。

<div class="row push-to-11 small-up-1 medium-up-2 large-up-3 section-spacer-large">
  <directive-name ng-if="desktop" class="column" size="'threequart-padding-bottom'" artist="true"></directive-name>
  <directive-name ng-if="desktop" class="column" size="'threequart-padding-bottom'" artist="false"></directive-name>
</div>

元のマークアップを見るとcaption、スコープに追加してそれを渡す必要があるかもしれませんが、それでもそれほど面倒ではありません。

一般的に言えば、最終手段のディレクティブのようng-initに感じます。ng-includeこれらは、日常的に使用するためのものではありません。言うための公式ドキュメントでさえngInit：

このディレクティブを悪用して、不要な量のロジックをテンプレートに追加することができます。適切な用途はほんのわずかです...

于 2016-04-06T01:53:29.620 に答える