0

我正在实施一个navigation指令，该指令应该a为每个导航项包含元素：

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

我如何才能访问这些锚点？访问element's 的孩子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

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

我假设您的导航元素是在一个控制器中定义的，该控制器是该指令的父级

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/

于 2013-11-01T20:00:52.383 回答