Ng-inside ng-templateが機能しない場合

Question

コンポーネントを作成しましたが、コンポーネントのテンプレートを動的にしようとしています。つまり、条件によっては親タグがdivでなければなりません。

私はng-ifを使用しようとしていましたが、何とか動作しません。ここにコードスニペットがあります。なんらかの理由で、ng-ifがtrueであっても、ネストされたdiv（.testDiv。testThumbnail）は未定義となり、これによってコンポーネントが破損します。

ng-ifがtrueの場合でもコンポーネントが見つからない理由を理解できません。私はAngular JSを初めて使っているので、ここで何か不足しているかもしれません。または、ある条件に従ってコンポーネントの親タグを動的に作成するより良い方法があります。

function myCardController($window) { 
 
    var element = angular.element(document.querySelector('.testDiv .testThumbnail'));//is undefined 
 
} 
 

 
angular.module('myApp').component('myCard', { 
 
\t templateUrl: 'testTemplate', , 
 
\t controller: ["$window", myCardController], 
 
});

<script type="text/ng-template" id="testTemplate"> 
 
    <div ng-if="true" 
 
     class="testDiv"> 
 
     <div role="img" class="testThumbnail"></div> 
 
    </div> 
 
    <a ng-if="false" class="tesstDiv">same content</a> 
 
</script>

Answer 1

おそらくNG-アプリまたはNG-コントローラディレクティブを追加して欠場します。あなたのテンプレートとしてHTMLを以下の用途：

<div ng-controller = "myCardController"> 
    <div ng-if="show" 
     class="testDiv"> 
     <div role="img" class="testThumbnail"></div> 
    </div> 
    <a ng-if="!show" class="tesstDiv">same content</a> 
</div> 

更新など、あなたのJSコード：

function myCardController($window) { 
    var element = angular.element(document.querySelector('.testDiv .testThumbnail'));//is undefined 
    $scope.show = true; 
} 

angular.module('myApp').component('myCard', { 
    templateUrl: 'testTemplate.html', , 
    controller: ["$window", myCardController], 
}); 

あなたはまた、あなたの体のタグにNG-アプリ= "て、myApp"を使用することができます。