ng-init変数に基づいてng-include部分HTMLテンプレートの側面を表示または非表示しようとしています

Question

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

私の部分がある：私のメインの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> 

、私は、このセットアップを持っている：artist = falseかのよう

 <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> 

彼らは両方の現在の属性を取得しています。

いつでも、いつng-initを使用しないかについて、複数の記事を読んでいますが、これはなぜ各divで更新されないのか混乱しています。私はこの部分を複数のページで使用しています。

Answer 1

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

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ためofficial docsは言う：このディレクティブは、テンプレートにロジックの不要な量を追加するために悪用される可能性が

。ほんの少しの適切な用途があります...