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

要解决演示中的问题，您可以访问模板中的重复项和指令范围

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

只要该vriable在当前范围内，任何未在引用的表达式中过滤相关的内容都将被视为变量

演示：http://jsfiddle.net/2GXs5/4/

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

1 个答案: