Question

所以我正在读取data.json文件，我正在尝试使用此填充选项卡。我能够在不使用自定义指令的情况下完成它，但是，我想使用指令创建多种布局可能性。但是我不能让我的ng-repeat在templates / directives / tabs.html文件中运行。这是我的设置。另外，我的$ scope.data.data将我带到了一个我能够成功循环的数组。指令中的范围是否与index.html中的范围不同？

index.html向下钻取是以下{{data.whatever}} 指令内部是否相同？

.controller('TabController', function($scope, $http, _){
    $scope.model = {};
    $http.get('data.json').then(function(resp) {
    $scope.data = resp.data.data;
})

angular.module('myApp').directive('cmTabs', function() {
    return { 
        restrict: 'A',
        scope: {
            content: '='
        },
        templateUrl: 'templates/directives/tabs.html'
    };
})

}）;

我的标记就是这样

<!DOCTYPE html>
<html ng-app="myApp" ng-controller="TabController">
    <head>
    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css">
    <title>{{data.PageTitle}}</title>
    </head>
    <body>
        <nav class="navbar navbar-default"><a class="navbar-brand" href="#"><!-- <img alt="Brand" src="..."> -->{{data.PageTitle}}</a>
               <ul class="nav navbar-nav">
                 <li ng-class='{active:$first}' ng-repeat="menu in data.toplevelcontainer" ng-click="model.activeTab=tab" tooltip="{{menu.label}}" tooltip-trigger="mouseenter" tooltip-placement="bottom">
                   <a href="#">{{menu.label}}</a>
                 </li>
               </ul>
        </nav>
        <div class="container-fluid" ng-if="data.Layout === 'tabs'" >
          <div cm-tabs content="data"></div>
        </div>
        <div class="container-fluid" ng-if="data.Layout === 'menu'">
          <h1>menu</h1>
        </div>
        <script src="node_modules/jquery/dist/jquery.js"></script>
        <script src="node_modules/angular/angular.js"></script>
        <script src="node_modules/underscore/underscore-min.js"></script>
        <script src="node_modules/bootstrap/dist/js/bootstrap.js" type="text/javascript"></script>
        <script src="app.js"></script>
        <script>
            $("ul.nav-tabs a").click(function (e) {
                e.preventDefault();  
                $(this).tab('show');
            });</script>
        </body>
        </html>

指令模板

<div class="tabbable boxed parentTabs">
    <div class="tab-content">
        <div class="tab-pane fade active in" id="set1">
            <div class="tabbable">
                <ul class="nav nav-tabs" ng-repeat="t in data.toplevelcontainer">
                    <li ng-class='{active:$first}' ng-repeat="st in t.content.innercontent" data-toggle="tooltip" data-placement="left" title="{{st.tooltip}}"><a href="#{{st.label}}">{{sub_tab.label}}</a></li>
                </ul>
                <div class="tab-content">
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

您应该使用data.toplevelcontainer代替data。

因为您要将控制器的范围模型content映射到指令中的content。因此，控制器中的数据现在已分配给指令的范围变量ng-repeat。

所以，你的<ul class="nav nav-tabs" ng-repeat="t in content.toplevelcontainer">应该是这样的，

SharedArray

没有得到我的数据到我的角度指令

1 个答案: