AngularJS 选项卡示例和 IE8答案

【问题标题】：AngularJS tabs example and IE8AngularJS 选项卡示例和 IE8
【发布时间】：2012-11-01 05:07:09
【问题描述】：

我正在使用 AngularJS 主页上的选项卡示例。我基本上只是逐字提取了该代码，所以它看起来像这样：

app.directive('tabs', function() {
    return {
        restrict: 'E',
        transclude: true,
        scope: {},
        controller: function($scope, $element) {
            var panes = $scope.panes = [];

            $scope.select = function(pane) {
                angular.forEach(panes, function(pane) {
                    pane.selected = false;
                });
                pane.selected = true;
            }

            this.addPane = function(pane) {
                if (panes.length == 0) $scope.select(pane);
                panes.push(pane);
            }
        },
        template:
            '<div class="tabbable">' +
                '<ul class="nav nav-tabs">' +
                '<li ng-repeat="pane in panes" ng-class="{active:pane.selected}">'+
                '<a href="" ng-click="select(pane)">{{pane.title}}</a>' +
                '</li>' +
                '</ul>' +
                '<div class="tab-content" ng-transclude></div>' +
                '</div>',
        replace: true
    };
});

app.directive('pane', function() {
        return {
            require: '^tabs',
            restrict: 'E',
            transclude: true,
            scope: { title: '@' },
            link: function(scope, element, attrs, tabsCtrl) {
                tabsCtrl.addPane(scope);
            },
            template:
                '<div class="tab-pane" ng-class="{active: selected}" ng-transclude>' +
                    '</div>',
            replace: true
        };
    })

这很好用，除了在 IE8 中，您单击以更改当前选项卡的实际选项卡丢失并且我收到此控制台错误：

  Error: No controller: tabs<div class=tab-pane title="Change Log" ng-class="{active: selected}" ng-transclude>

IE8 可能出了什么问题？

【问题讨论】：

它适用于我需要支持的所有主流浏览器，除了 IE8。我会创建一个 plnkr 但 plnkr 在 IE8 中也不起作用...
查看这篇文章stackoverflow.com/questions/13184063/…
我正在做 document.createElement('tabs') 和 document.createElement('pane')。这是我已经知道的，并且在 IE8 中有其他指令可以很好地工作。这里还有什么我想念的吗？
很难说。你有' ' 吗？
必须是元素吗？如果它只是一个属性，它将在 IE8 中工作。将限制更改为“A”，然后更新您的 HTML 以使用属性而不是标签名称。

标签： javascript angularjs

【解决方案1】：

在您的指令上，尝试将restrict: 'E' 替换为restrict: 'A' 然后将所有指令更改为使用属性。这就是我如何让http://angular-ui.github.io/bootstrap/ 中的选项卡在我正在处理的必须支持 IE8 的项目中工作。

【讨论】：