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混合搭配静态和范围。

很抱歉，如果这没有帮助，我在上面的链接上玩了一下，并且无法让它混合搭配。因此，使您的范围var具有完整的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，这意味着它将开始在html内查找pathname[3]属性。

所以它必须像：

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