4

angular.js モジュールで定義された 2 つのディレクティブがあります。最初に宣言された HTML 要素はそのディレクティブを実行しますが、他のディレクティブを使用する 2 番目の HTML 要素はそれを実行しません。

この HTML を考えると:

<div ng-app="myApp">
  <div ng-controller="PlayersCtrl">
    <div primary text="{{primaryText}}"/>
    <div secondary text="{{secondaryText}}"/>
  </div>
</div>

およびこの angular.js コード:

var myApp = angular.module('myApp', []);

function PlayersCtrl($scope) {
    $scope.primaryText = "Players";
    $scope.secondaryText = "the best player list";
}

myApp.directive('primary', function(){
  return {
    scope: {
      text: '@'
    },
    template: '<h1>{{text}}</h1>',
    link: function(scope, element, attrs){
      console.log('primary directive');
    }
  };
});

myApp.directive('secondary', function(){
  return {
    scope: {
      text: '@'
    },
    template: '<h3>{{text}}</h3>',
    link: function(scope, element, attrs){
      console.log('secondary directive');
    }
  };
});

結果の HTML は「プライマリ」ディレクティブのみであり、「セカンダリ」ディレクティブはレンダリングされません。

<div ng-app="myApp" class="ng-scope">
  <div ng-controller="PlayersCtrl" class="ng-scope">
    <div primary="" text="Players" class="ng-isolate-scope ng-scope">
      <h1 class="ng-binding">Players</h1>
    </div>
  </div>
</div>

「プライマリ ディレクティブ」テキストのみが出力されるため、コンソール出力でもこれが検証されます。

次に、プライマリ要素とセカンダリ要素の順序を入れ替えると、セカンダリディレクティブが実行され、プライマリディレクティブは実行されません。

<!-- reversed elements -->
<div secondary text="{{secondaryText}}"/>
<div primary text="{{primaryText}}"/>

<!-- renders this HTML (secondary, no primary) -->
<div ng-app="myApp" class="ng-scope">
  <div ng-controller="PlayersCtrl" class="ng-scope">
    <div secondary="" text="the best player list" class="ng-isolate-scope ng-scope">
      <h3 class="ng-binding">the best player list</h3>
    </div>
  </div>
</div>

どうしてこれなの？私は何を間違っていますか？

4

1 に答える 1

7

divはvoid 要素ではなく、終了タグが必要です。

<div ng-app="myApp">
  <div ng-controller="PlayersCtrl">
    <div primary text="{{primaryText}}"></div>
    <div secondary text="{{secondaryText}}"></div>
  </div>
</div>

例

于 2013-06-24T22:19:28.887 に答える