Angularjs 模板工作正常，而templateUrl不在角度组件中_Angularjs_Angularjs Components_Angular Templatecache

Angularjs 模板工作正常，而templateUrl不在角度组件中

angularjs

Angularjs 模板工作正常，而templateUrl不在角度组件中,angularjs,angularjs-components,angular-templatecache,Angularjs,Angularjs Components,Angular Templatecache,嗨，我正在从这个链接学习角度组件，问题是当我试图从外部文件而不是模板加载时，它抛出以下错误 angular.js:13708 TypeError: Cannot set property 'selected' of undefined at controller.selectTab (scr.js:47) at controller.$postLink (scr.js:50) at angular.js:9228 at forEach (angular.js:32

嗨，我正在从这个链接学习角度组件，问题是当我试图从外部文件而不是模板加载时，它抛出以下错误

angular.js:13708 TypeError: Cannot set property 'selected' of undefined
    at controller.selectTab (scr.js:47)
    at controller.$postLink (scr.js:50)
    at angular.js:9228
    at forEach (angular.js:329)
    at nodeLinkFn (angular.js:9225)
    at compositeLinkFn (angular.js:8510)
    at compositeLinkFn (angular.js:8513)
    at compositeLinkFn (angular.js:8513)
    at publicLinkFn (angular.js:8390)
    at angular.js:1756

下面是scr.js代码

var tab = {
  bindings: {
    label: '@'
  },
  require: {
    tabs: '^^tabs'
  },
  transclude: true,
 template:['$templateCache',function($templateCache){
  return $templateCache.get('tab.html') 
  }
  ],

  controller: function () {
    this.$onInit = function () {
        this.tab = {
        label: this.label,
        selected: false
      };
      this.tabs.addTab(this.tab);
    };
  }
};

var tabs = {
    bindings: {
    selected: '@'
  },
  transclude: true,
   template:['$templateCache',function($templateCache){
  return $templateCache.get('tab.html') 
  }
  ],    
  controller: function () {
      this.$onInit = function () {
        this.tabs = [];
    };
    this.addTab = function addTab(tab) {
      this.tabs.push(tab);
    };
    this.selectTab = function selectTab(index) {
      for (var i = 0; i < this.tabs.length; i++) {
        this.tabs[i].selected = false;
      }
      this.tabs[index].selected = true;
    };
    this.$postLink = function () {
        this.selectTab(this.selected);
      console.log(this.selected)
    };
  },

};

angular
    .module('app', [])
  .component('tab', tab)
  .component('tabs', tabs);

var选项卡={
绑定：{
标签：“@”
},
要求：{
制表符：“^^制表符”
},
是的，
模板：['$templateCache'，函数（$templateCache）{
返回$templateCache.get（'tab.html'）
}
],
控制器：函数（）{
此。$onInit=函数（）{
this.tab={
标签：this.label，
所选：false
};
this.tabs.addTab（this.tab）；
};
}
};
变量选项卡={
绑定：{
选定：“@”
},
是的，
模板：['$templateCache'，函数（$templateCache）{
返回$templateCache.get（'tab.html'）
}
],    
控制器：函数（）{
此。$onInit=函数（）{
this.tabs=[]；
};
this.addTab=函数addTab（tab）{
这个.tabs.push（tab）；
};
this.selectTab=函数selectTab（索引）{
对于（var i=0；i


以下是html代码：
    <html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.js"></script>
<script src="scr.js"></script>
<style>
* {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}
body {
  font: 300 14px/1.4 'Helvetica Neue', Helvetica, Arial, sans-serif;
  background: #111;
  margin: 0;
  padding: 0;
}
.tabs {
  margin: 25px;
  background: #fff;
}
.tabs__list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border-bottom: 1px solid #eee;
}
.tabs__list li {
  float: left;
}
.tabs__list li a {
  color: #444;
  display: block;
  text-decoration: none;
  padding: 10px 20px;
}
.tabs__content {
  padding: 10px;
}
</style>
</head>
<body>

<div ng-app="app">
  <div>
    <tabs selected="2">
      <tab label="Tab 1">
        Tab 1 contents!
       </tab>
       <tab label="Tab 2">
        Tab 2 contents!
       </tab>
       <tab label="Tab 3">
        Tab 3 contents!
       </tab>
    </tabs>
  </div>
</div>
</body>
</html>


* {
框大小：边框框；
-webkit框大小：边框框；
-moz框大小：边框框；
}
身体{
字体：300 14px/1.4“Helvetica Neue”，Helvetica，Arial，无衬线；
背景：#111；
保证金：0；
填充：0；
}
.标签{
利润率：25px；
背景：#fff；
}
.tabs\u列表{
列表样式：无；
保证金：0；
填充：0；
溢出：隐藏；
边框底部：1px实心#eee；
}
.tabs\u列表li{
浮动：左；
}
.tabs\u列表li a{
颜色：#444；
显示：块；
文字装饰：无；
填充：10px 20px；
}
.tabs\u内容{
填充：10px；
}
表1内容！
表2内容！
表3内容！

下面是我试图分别在component tab.html和tabs.html中加载的两个模板：
    <div class="tabs__content" ng-if="$ctrl.tab.selected">
      <div ng-transclude></div>
    </div>

<div class="tabs">
      <ul class="tabs__list">
        <li ng-repeat="tab in $ctrl.tabs">
          <a href="" 
            ng-bind="tab.label" 
            ng-click="$ctrl.selectTab($index);"></a>
        </li>
      </ul>
      <div class="tabs__content" ng-transclude></div>
    </div>







请任何人帮我解决这个问题，提前谢谢
get（tab.html）需要一个路径，而不仅仅是文件名。那么，您的tab.html是否位于文件所在的同一文件夹中？所有文件都位于相同的foloderIndex.html中？也在同一个文件夹中？是的index.html、tab.html、tabs.html、js文件都在同一个文件夹中