我想使用同一指令的多个实例来呈现一个集合。我正在使用隔离范围将数组映射到隔离范围中的名称。孤立作用域中的链接函数可以正确看到映射的数组,但是其中的ng-repeat无效。

<html ng-app="MyApp">
  <head>
    <script type="text/javascript" src="angular.js"></script>
    <script type="text/javascript">
    var MyCtrl = function($scope) {
      $scope.blah = [1,2,4,5];
      $scope.bar = [14,52,64,25];
    }
    angular.module("MyApp", [])
    .directive("sephBlah", function($parse) {
        return {
          scope: {
            tags: "=sephBlah"
          },
          link: function(scope, elem, attrs) {
            console.log(scope.tags[0]);
          }
        }
    });
    </script>
  </head>
  <body ng-controller="MyCtrl">
      <div seph-blah="blah">
        <p data-ng-repeat="t in tags">{{t}}</p><!-- why this renders nothing? -->
      </div>

      <div seph-blah="bar">
        <p data-ng-repeat="t in tags">{{t}}</p><!-- why this renders nothing? -->
      </div>
  </body>
</html>


我不确定ng-repeat为什么不显示任何内容。链接功能可以正确看到阵列。

最佳答案

您不应该使用这样的指令。您想要获得的功能应该使用控制器来完成。

使用指令时,请使用templatetemplateUrl属性提供内容。所以这将工作:

.directive("sephBlah", function($parse) {
    return {
      scope: {
        tags: "=sephBlah"
      },
      template: '<p data-ng-repeat="t in tags">{{t}}</p>',
      link: function(scope, elem, attrs) {
        console.log(scope.tags[0]);
      }
    }
});


并在html中执行以下操作:

<div ng-attr-seph-blah="blah"></div>

07-24 20:22