Angularjs ng-include src

Question

我遇到了一個問題，這恰好是ng-include不提起文件。從ng-include中的鏈接訪問屬性有什麼問題？我想知道是否有人能幫我解決這個問題。

(function(){ 
 
var app = angular.module('AVS', []); 
 
    
 
    app.controller('TestCtrl', function($scope){ 
 
    var tabClasses; 
 
    
 
    function initTabs() { 
 
    tabClasses = ["","","",""]; 
 
    } 
 
    
 
    $scope.getTabClass = function (tabNum) { 
 
    return tabClasses[tabNum]; 
 
    }; 
 
    
 
    $scope.getTabPaneClass = function (tabNum) { 
 
    return "tab-pane " + tabClasses[tabNum]; 
 
    }; 
 
    
 
    $scope.setActiveTab = function (tabNum) { 
 
    initTabs(); 
 
    tabClasses[tabNum] = "active"; 
 
    }; 
 
    
 
    $scope.tab1 = " "; 
 
    $scope.tab2 = "dsadasa "; 
 
    $scope.tab3 = "dsadas "; 
 
    $scope.tab4 = "dsadsa "; 
 
    
 
    //Initialize 
 
    initTabs(); 
 
    $scope.setActiveTab(1); 
 

 
    $scope.sutabs = { 
 
    name: ['Life Safety Manager™', 'Life Safety Elements', 'Fire Dampers', 'Fire Extinguishers'], 
 
    number: [1,2,3,4], 
 
    status: ['','','',''] 
 
    }; 
 

 
    $scope.lsm = { 
 
    name: ['Life Safety Manager ™', 'Life Safety Elements', 'Fire Dampers', 'Fire Extinguishers'], 
 
    pathname: ['life-safety-manager', 'Life-Safety-Elements', 'Fire-Dampers', 'Fire-Extinguishers'], 
 
    number: [1,2,3,4], 
 
    status: ['','','',''] 
 
    }; 
 

 
    $scope.lstabs = { 
 
    name: ['Life Safety Master Plans', 'Evacuation Maps', 'Fire Suppression', 'Fire Alarm Layouts', 'Exit Path Layouts', 'Life Safety Devices', 'Occupancy','Wayfinding'], 
 
    pathname: ['Life-Safety-Master-Plans', 'Evacuation-Maps', 'Fire-Suppression', 'Fire-Alarm-Layouts', 'Exit-Path-Layouts', 'Life-Safety-Devices', 'Occupancy','Wayfinding'], 
 
    number: [1,2,3,4,5,6,7,8], 
 
    status: ['','','','','','','',''] 
 
    }; 
 

 
}); 
 
})();

<div class = "row" ng-controller='TestCtrl'> 
 
    <div class ="col-md-2"> 
 
     <div class="tabbable tabs-left"> 
 
     <ul class="nav nav-tabs"> 
 
     <li ng-class="getTabClass({{lsm.number[0]}})" ng-click="setActiveTab({{lsm.number[0]}})" class = "{{lsm.status[0]}}"><a href="#{{lsm.pathname[0]}}" data-toggle="tab">{{lsm.name[0]}}</a></li> 
 
     <li ng-class="getTabClass({{lsm.number[1]}})" ng-click="setActiveTab({{lsm.number[1]}})" class = "{{lsm.status[1]}}"><a href="#{{lsm.pathname[1]}}" data-toggle="tab">{{lsm.name[1]}}</a></li> 
 
     <li ng-class="getTabClass({{lsm.number[2]}})" ng-click="setActiveTab({{lsm.number[2]}})" class = "{{lsm.status[2]}}"><a href="#{{lsm.pathname[2]}}" data-toggle="tab">{{lsm.name[2]}}</a></li> 
 
     <li ng-class="getTabClass({{lsm.number[3]}})" ng-click="setActiveTab({{lsm.number[3]}})" class = "{{lsm.status[3]}}"><a href="#{{lsm.pathname[3]}}" data-toggle="tab">{{lsm.name[3]}}</a></li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    <div class = "col-md-10"> 
 
    <div class="tab-content"> 
 
     <div ng-class="getTabPaneClass({{lsm.number[0]}})" id="{{lsm.pathname[0]}}" class="content {{lsm.status[0]}}"> 
 
       <div ng-include src = "'disciplinedrawings/life-safety-manager/{{lsm.pathname[0]}}.html'"></div> 
 
      </div>  
 
      
 
      <div ng-class="getTabPaneClass({{lsm.number[1]}})" id="{{lsm.pathname[1]}}" class="content {{lsm.status[1]}}">  
 
       <div ng-include src = "'disciplinedrawings/life-safety-manager/{{lsm.pathname[1].html}}'"></div> 
 
      </div> 
 
      
 
      <div ng-class="getTabPaneClass({{lsm.number[2]}})" id="{{lsm.pathname[2]}}" class="content {{lsm.status[2]}}">  
 
       <div ng-include src = "'disciplinedrawings/life-safety-manager/{{lsm.pathname[2].html}}.html'"></div> 
 
      </div> 
 
      
 
      <div ng-class="getTabPaneClass({{lsm.number[3]}})" id="{{lsm.pathname[3]}}" class="content {{lsm.status[3]}}">  
 
      <div ng-include src = "'disciplinedrawings/life-safety-manager/{{lsm.pathname[3].html}}.html'"></div> 
 
      </div>  
 
    </div> 
 
    </div> 
 
</div>

Answer 1

如果你看一下例子上

https://docs.angularjs.org/api/ng/directive/ngInclude

它不使用 '' 它只是

ng-include="template.url" 

現在，我明白你需要用一個字符串「'來包裝。但template.url來自範圍。也許你不能用ng-include與靜態和範圍混合搭配。

對不起，如果這沒有幫助，我在上面的鏈接上玩了一下，並且無法讓它混合搭配。所以，讓你的範圍變種具有完整的URL

Answer 2

在這種

<div ng-include src = "'disciplinedrawings/life-safety-manager/{{lsm.pathname[3].html}}.html'"></div> 

在src，你有{{lsm.pathname[3]這實際上將返回你的字符串。但是您也添加了{{lsm.pathname[3].html這意味着它將開始尋找pathname[3]內的html財產。

所以它必須是這樣的：

<div ng-include src = "'disciplinedrawings/life-safety-manager/{{lsm.pathname[3]}}.html'"></div> 

哪些可以更好地描述爲：

<div ng-include src = "{{'disciplinedrawings/life-safety-manager/'+lsm.pathname[3]+'.html'}}"></div>