0

各ナビゲーション項目の要素をnavigation持つ必要があるディレクティブを実装しています:a

<navigation title="My Web Page">
  <a href="#">Home</a>
  <a href="#">About</a>
</navigation>

これらのアンカーにアクセスするにはどうすればよいですか? elementの子にアクセスすると、link()探している「a」ではなく、テンプレートの子のみが返されます。

.directive('navigation', function () {
    return {
      template: template,
      restrict: 'E',
      replace: 'true',
      scope: {
        title: '@'
      },
      link: function postLink(scope, element, attrs) {
        // This only looks in the directive's template
        console.log($(element).find('a'));            
      }
    };
  });

私は何が欠けていますか？ディレクティブのスコープにアンカーの配列を添付し、テンプレート内でそれらを反復処理することを楽しみにしています。

4

2 に答える 2

2

元のコンテンツを新しいテンプレート内に移動するには、プロパティを使用する必要がありtranscludeます。translude が true に設定されている場合、ディレクティブは元のコンテンツを削除しますが、ng-transludeディレクティブを介してテンプレート内に再挿入できるようにします。以下の例を参照してください。

元のデータを変換しないと、アンカー タグが削除されるため、リンク関数がそれらを見つけることができません。

.directive('navigation', function () {
    return {
        template: '<div>Tansclude data here: <span ng-translude></span></div>',
        restrict: 'E',
        replace: true,
        transclude: true,
        scope: {
            title: '@'
        },
        link: function postLink(scope, element, attrs) {
            console.log($(element).find('a'));            
        }
   };
});
于 2013-11-02T02:26:54.187 に答える
1

あなたのナビテムがどこから来ているのか少し混乱していますが、やってみます

あなたの nav 要素は、ディレクティブの親であるコントローラーで定義されていると想定しています

function myCtrl ($scope){
    $scope.navArray=[{title: 'Link1', href: 'www.example.com'}, {...}];
}

ディレクティブで配列を属性として宣言する必要があります

<navigation nav="navArray"></navigation>

ディレクティブのスコープに双方向バインドします

.directive('navigation', function () {
    return {
      template: '<div><a ng-repeat="link in nav" href="link.href">{{link.title}}</a></div>',
      restrict: 'E',
      replace: 'true',
      scope: {
        nav: '='
      },
      link: function postLink(scope, element, attrs) {

      }
    };
  });

リンク関数で DOM 操作を避ける必要があることを忘れないでください。代わりに、テンプレートで ng-repeat を使用し、nav 項目の配列がディレクティブのスコープに渡されるようにすることをお勧めします。

編集：Fiddle http://jsfiddle.net/nicolasmoise/8YQPh/3/を参照してください

于 2013-11-01T20:00:52.383 に答える