将变量传递给 ng-repeat 中的 HTML 属性答案

【问题标题】：Passing variable into HTML attribute inside ng-repeat将变量传递给 ng-repeat 中的 HTML 属性
【发布时间】：2017-10-06 16:38:38
【问题描述】：

我正在尝试创建一个指令，该指令将加载位于名为“page-.html”的文件中的页面。目的是该指令应接受页面名称作为属性。这是因为该指令将在 ng-repeat 中使用，因此该属性的值会有所不同因为该指令被多次调用。目的是页面面板根据其参数加载页面，但是在我自己尝试此操作时，Angular 会尝试打开文字文件 'page-{{page.name}}.html' 而不是替换为ng-repeat 迭代中的页面。我也试过不带引号，不带大括号，不带两者，但它们都失败了。有谁知道我可以做到这一点吗？

HTML：

<body ng-controller="PageController as ctrl">
  [...]
  <div ng-repeat="page in ctrl.pages" ng-show="page.name == ctrl.currentPage">
    {{page.name}}
    <page-panel pageName="{{page.name}}"></page-panel>
  </div>
</body>

JS：

var app = angular.module('agora-vote', []);
app.controller('PageController', function(){
  this.pages = [{name:"Page1"},{name:"Page2"}];
  this.currentPage = "Page1";
  this.getName = function(){
    return
  }
});
app.directive('pagePanel', function() {
  return {
    templateUrl: function(elem, attr) {
      console.log(attr)
      return 'page-' + attr.pageName + '.html';
    }
  };
});

【问题讨论】：

使用ng-include 指令。

标签： html angularjs angularjs-ng-repeat

【解决方案1】：

我进行了一项更改，看起来效果很好。

 return 'page-' + attr.$attr.pagename + '.html';

完整代码如下

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
</head>

<body ng-app="agora-vote" ng-controller="PageController as ctrl">
    [...]
    <div ng-repeat="page in ctrl.pages" ng-show="page.name == ballot.currentPage">
        {{page.name}}
        <page-panel pageName="{{page.name}}"></page-panel>
    </div>


    <script src="../lib/angular.js"></script>
    <script>
        var app = angular.module('agora-vote', []);
        app.controller('PageController', function () {
            this.pages = [{ name: "Page1" }, { name: "Page2" }];
            this.currentPage = "Page1";
            this.getName = function () {
                return
            }
        });
        app.directive('pagePanel', function () {
            return {
                templateUrl: function (elem, attr) {
                    console.log(attr)
                    return 'page-' + attr.$attr.pagename + '.html';
                }
            };
        });
    </script>
</body>
</html>

【讨论】：

什么是 $attr ？