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

我试图创建一个指令，该指令将加载位于名为'page-<名称为> .html'的文件中的页面。目标是该指令应该接受页面的名称作为属性。原因是因为该指令将在ng-repeat内部使用，因此该属性的值将因指令被多次调用而变化。目标是页面面板根据它的参数加载页面，但是一旦自己尝试，Angular会尝试打开文字文件'page - {{page.name}}。html'，而不是替换在ng-repeat的迭代中。我也尝试过没有引号，没有括号，没有两个引号，但都失败了。有没有人知道我可以做到这一点？将变量传递到ng属性中的HTML属性

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'; 
    } 
    }; 
});

来源

2017-10-05 Sleumas

使用[NG-包括]（https://docs.angularjs.org/api/ng/directive/ngInclude）指令。 – georgeawg

我已经作出一个改变，看起来它是工作的罚款。

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>

来源

2017-10-06 05:23:17

什么是$ attr？ – Gerfried

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

回答

相关问题