Question

我正在实施一个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'));            
      }
    };
  });

我错过了什么？我期待在指令范围内附加一组锚点，并在模板中迭代它们。

Answer 1

要在新模板中移动原始内容，您需要使用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'));            
        }
   };
});

Answer 2

我有点困惑你的导航来自哪里，但我会试一试

我假设您的导航元素是在指令

的父控制器中定义的

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，并确保将导航项数组传递到指令的范围。

修改：请参阅小提琴http://jsfiddle.net/nicolasmoise/8YQPh/3/

访问元素指令子

2 个答案: