Question

我正在尝试创建一个指令，该指令将加载位于名为“page-＆lt; page of page＆gt; .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';
    }
  };
});

Answer 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>

将变量传递到ng-repeat中的HTML属性

1 个答案: