0

グループごとにウェブサイトを並べ替える小さなアプリを作成しています。グループは、タブ可能なナビゲーター (twitter ブートストラップ) のタブとして表示されます。したがって、新しいグループを追加するたびに新しいタブが表示されることが前提です。現時点では次のようになっています。

ここに画像の説明を入力

したがって、新しいグループが表示される部分は完全に機能します (ng-repeat を使用してそれらをレンダリングし、すべてのグループを調べます)。しかし、それらをクリックしてもタブが表示されず、何も起こりません。静的タブがあるときに機能しました。

関連するhtmlコードは次のとおりです。

<div class="tabbable tabs-left">

<ul class="nav nav-tabs" id="myTab">
    <li class="active"><a href="#home">All websites</a></li>
    <li ng-repeat="group in listGroups()"><a href="#{{group.name}}">{{group.name}}</a></li>
    <li><a href="#group" data-toggle="modal">+Add group</a></li>
</ul>

<div class="tab-content">
    <div class="tab-pane active" id="home">
        <table class="table">
            <tr class="row">
                <th align="center">URL</th>
                <th align="center" colspan="2">Actions</th>
            </tr>
            <tr class="row" ng-repeat="item in listSites()">
                <td><font color="{{item.color}}">{{item.url}}</font></td>
                <td>Edit</td>
                <td>Delete</td>
            </tr>
        </table>
    </div>
    <div class="tab-pane" id="Social">asdf</div>
    <div class="tab-pane" ng-repeat="group in listGroups()" id="{{group.name}}">asdf</div>
</div>
<script>
    $('#myTab a').click(function (e) {
        e.preventDefault();
        $(this).tab('show');
    })
</script>

そして、ここに私のコントローラコードがあります:

app.factory('groups', function() {
var groups = [];
var groupsService = {};

groupsService.add = function(i_group) {
    var group = {"name": i_group}
    groups.push(group);
};
groupsService.list = function() {
    return groups;
};

return groupsService;
});

function listCtrl($scope,sites, groups) {
    $scope.listSites = sites.list;
    $scope.listGroups = groups.list;
}

要約すると、問題は基本的に、動的に生成されたタブを動的に生成されたコンテンツにリンクするにはどうすればよいですか?

4

1 に答える 1

2

jQuery コードと Angular を混在させていると、問題が発生します。

<a>1 つには、jQuery コードは、スクリプトの実行時に既存の sにバインドします。新しいもの (Angular が作成するもの) はイベント ハンドラーを取得しません。次のようなものが必要です。

$("#myTab").on("click", "a", function(e) {
    // same as your code
});

しかし、あなたはまだ Angular/jQuery を混在させています。$scope.$apply()が呼び出されないため、おそらく機能しないか、ファンキーに機能します。ng-clickタブで使用し、コントローラーでイベントを処理することをお勧めします。

<li ng-repeat="group in listGroups()">
    <a ng-click="selectGroup(group)">{{group.name}}</a>
</li>

selectGroup()(コントローラーにメソッドを追加する必要があります。)

そうは言っても、pkozlowski.opensource がコメントしているように、Bootstrap を使用した Angular UI などの既存のコンポーネント ライブラリを使用することをお勧めします。

于 2013-10-01T11:26:13.827 に答える