angularjs 如何获取嵌入模板中的ng-repeat项？

vbkedwbf 于 2023-01-20 发布在 Angular

关注(0)|答案(2)|浏览(154)

我怎样才能在嵌入模板中使用ngRepeat项？有可能吗？
指令模板：

<ng-transclude ng-repeat="record in records | filter1 | filter2"></ng-transclude>

指令：

app.directive('myDirective', function () {
    return {
      templateUrl: '/views/directives/mydirective.html',
      restrict: 'A',
      transclude: true,
      scope: {
        records: '='
      }
    };
  });

控制器视图：

<div my-directive records="myRecords">
  {{ myDirective.record }}
</div>

angularjs

来源：https://stackoverflow.com/questions/32573485/how-to-get-ng-repeat-item-inside-transcluded-template

2条答案

按热度按时间

yc0p9oo01#

从你做的方式看不像。
但是你可以通过指令中的$compile模板来实现这一点。
http://jsbin.com/mirisixodo/edit?html,js,console,output

赞(0）回复(0）举报 2023-01-20

x759pob22#

（意识到这几乎肯定是太晚了，你用...）
看起来这一点在这个AngluarJS GitHub问题中已经详细讨论过了，多亏了moneytree-doug，有一种方法可以解决你的问题，而不必求助于compile。
问题似乎是，至少从AngularJS 1.2.18开始，transcluding创建了自己的子作用域，因此您的迭代变量不再是可访问的。
然而，$parent * 是可访问的，我们可以使用它来访问迭代变量，并完成您想要做的事情。
基于Micah's jsbin构建...

HTML：

<!DOCTYPE html>
<html ng-app="app">
<head>
  <script 
    src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div ng-controller="TestCtrl">
    <my-directive records="myRecords">
      ?: {{$parent.record}}
    </my-directive>
  </div>
</body>
</html>

JavaScript语言

var app = angular.module('app', [])
  .controller('TestCtrl', function($scope) {
    $scope.myRecords = ['foo', 'bar', 'baz'];
  });

app.directive('myDirective', function () {
  return {
    scope: {
      records: '='
    },
    transclude: true,
    template: 'HELLO' +
      '<div id="inner-transclude"' +
      '  ng-transclude' +
      '  ng-repeat="record in records">X</div>',
    controller: function ($scope) {
      console.log($scope.records);
    },
    restrict: 'E'
  };
});

结果

HELLO
?: foo
?: bar
?: baz

JsBin of reasonable success .
因此，再次强调，关键是将控制器行从{{ myDirective.record }}更改为?: {{$parent.record}}。

赞(0）回复(0）举报 2023-01-20

我来回答

angularjs 如何获取嵌入模板中的ng-repeat项？

2条答案

HTML：

JavaScript语言

结果

相关问题

热门标签

最新问答