angularjs - 如何使用单个指令和每个选项卡的自定义标签字段在 AngularJS 中创建对象驱动选项卡？

Question

AngularJS 主页上的示例使用两个指令创建选项卡：一个用于选项卡，一个用于窗格。是否可以像这样创建一个模板和一个指令：

HTML：

<div ng-app="components">
<tabs objects="someObjects" labelprop="name" shouldbe="the value of object.name"></tabs>
<tabs objects="someObjects" labelprop="id" shouldbe="the value of object.id"></tabs>
</div>

JS：

angular.module('components', []).
directive('tabs', function() {
    return {
        restrict: 'E',
        replace: true,
        scope: {objects: '=', labelprop: '@', shouldbe: '@'},
        controller: function($scope, $element) {
            $scope.someObjects = [
                {name: "One", id: 1, data: 'foo'},
                {name: "Two", id: 2, data: 'bar'},
                {name: "There", id: 3, data: 'foobar'}
                ]
        },
        template:
            '<div class="tabbable">' +
                '<ul class="nav nav-tabs">' +
                    '<li ng-repeat="object in someObjects">' +
                        '<p>How do I use "labelprop" to get {{shouldbe}}</p>' +
                    '</li>' +
                '</ul>' +
            '</div>'
    }
})

（见这个小提琴说明我的问题：http: //jsfiddle.net/2GXs5/3/）

据我目前了解，因为ng-repeat是它自己的指令，它会自动执行它自己的事情，我无法访问object范围内的属性，比如我是否想在指令的链接函数中执行此操作：scope.label = scope.object['scope.labelprop']

此外，我仍在尝试围绕插值、嵌入等进行思考，因此解决方案可能会以某种方式涉及到这一点。

Answer 1

To solve issue in demo you have access to both the repeating item and the directive scope within the template

 <p>{{labelprop}} is  {{object[labelprop]}}</p>

Anything not filter related within the expression that isn't quoted will be treated as a variable so long as that vriable is within current scope

demo: http://jsfiddle.net/2GXs5/4/