Question

我正在尝试编写一个指令来创建角度的选项卡，但是每次运行代码时它都会在控制台中给出$ compile：ctreq。这是我的代码app.js

(function(window) {

angular.module('app', [])
.directive('tab', function() {
  return {
restrict: 'E',
transclude: true,
template: '<h2>Hello world!</h2> <div role="tabpanel" ng-transclude></div>',
require: '^tabset',
scope: {
    heading: '@'
},
link: function(scope, elem, attr,tabsetCtrl) {
     //tabsetCtrl.addTab(scope)
}
  }
})
 .directive('tabset', function() {
return {
restrict: 'E',
transclude: true,
scope: { },
templateUrl: 'tabset.html',
bindToController: true,
controllerAs: 'tabset',
controller: function() {
    var self = this
    self.tabs = []

    /* self.addTab = function addTab(tab) {
      self.tabs.push(tab)
    } */
    }
  }
})
})(window);

这是我的index.html

<html>
<head>
<title>Tabs Directive</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.0/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="app">
  <h1>Tabs, tabs, tabs!</h1>
 </tabset>
 <tab heading="Tab 1">
   Lorem ipsum dolor sit amet, ut eam nullam utroque liberavisse, ea
  </tab>
 <tab heading="Tab 2">
    Just another tab!
 </tab>
 </tabset>
</body>

这是我的tabset.html

<div role="tabpanel">
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation"
      ng-repeat="tab in tabset.tabs">

      <a href=""
        role="tab"
        ng-click="tabset.select(tab)">{{tab.heading}}</a>
    </li>
    </ul>

  <ng-transclude>
  </ng-transclude>
</div>

我无法理解我的错误。实际上有我的目标

创建一个像chrome.where那样的标签系统，我可以动态添加标签，标签的模板也是动态的。
每个模板都有不同的控制器。

Answer 1

index.html中的tabset标记都是结束标记，这意味着angular不会编译tabset，而tab指令不能要求tabset：

 </tabset> <!-- closing tag should be <tabset> -->
 <tab heading="Tab 1">
   Lorem ipsum dolor sit amet, ut eam nullam utroque liberavisse, ea
  </tab>
 <tab heading="Tab 2">
    Just another tab!
 </tab>
 </tabset> <!-- closing tag -->

$ compile：角度代码中的ctreq错误

1 个答案: