Question

我试图将angular-ui bootstrap tabs添加到一个简单的应用中，并且遇到了不同版本的控制器定义/范围（我认为）的问题

var app = angular.module('plunker', ['ui.bootstrap']);

// works as intended
var TabsDemoCtrl = function ($scope) {
  $scope.tabs = [
    { title:'Dynamic Title 1', content:'Dynamic content 1' },
    { title:'Dynamic Title 2', content:'Dynamic content 2', disabled: true }
  ];

  $scope.alertMe = function() {
    setTimeout(function() {
      alert('You\'ve selected the alert tab!');
    });
  };
};

// tabs are selectable, but blank
app.controller('ModifiedCtrl', function () {
  this.tabs = [
    { title:'Dynamic Title 1', content:'Dynamic content 1' },
    { title:'Dynamic Title 2', content:'Dynamic content 2' }
  ];
  this.test = 'inital test content';
});

这是我在文档中的plunkr的分支： http://plnkr.co/edit/UekWz89tCzZnRSBnV2cs?p=preview

我已经弄乱了这个，但我显然遗漏了一些东西......有什么建议吗？ TIA

这篇SO帖子很有帮助，但我还没有工作呢...... Alternative syntax for angular.module.controller

Answer 1

问题在于你的标记。

您正在ng-controller="ModifiedCtrl as tabs"然后ng-repeat="tab in tabs。所以，tabs实际上是你的控制者。您希望ng-repeat="tab in tabs.tabs"能够正常使用。

Angular-ui：选项卡的备用控制器语法

1 个答案: