將變量傳遞到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屬性

回答

相關問題