10

angularjs のタブとペインのサンプル コンポーネントを使用しています

angular.module('components', []).
    directive('tabs', function() {
        return {
            restrict: 'E',
            transclude: true,
            scope: {},
            controller: function($scope, $element) {
                var panes = $scope.panes = [];

                $scope.select = function(pane) {
                    angular.forEach(panes, function(pane) {
                        pane.selected = false;
                    });
                    pane.selected = true;
                }

                this.addPane = function(pane) {
                    if (panes.length == 0) $scope.select(pane);
                        panes.push(pane);
                    }
                },
                template:
                    '<div class="tabbable">' +
                        '<ul class="nav nav-tabs">' +
                            '<li ng-repeat="pane in panes" ng-class="{active:pane.selected}">'+
                                '<a href="" ng-click="select(pane)">{{pane.title}}</a>' +
                            '</li>' +
                        '</ul>' +
                        '<div class="tab-content" ng-transclude></div>' +
                    '</div>',
                replace: true
            };
        }).
    directive('pane', function() {
        return {
            require: '^tabs',
            restrict: 'E',
            transclude: true,
            scope: { title: '@' },
            link: function(scope, element, attrs, tabsCtrl) {
                tabsCtrl.addPane(scope);
            },
            template:
                '<div class="tab-pane" ng-class="{active: selected}" ng-transclude>' +
                '</div>',
            replace: true
        };
    })

SomePage.html

<tabs>
    <pane title="Datos Generales">
        <div ng-include src="'/resources/js/page/running/admin/templates/update-data.html'"></div>
    </pane>
    <pane title="Localización">
        <div ng-include src="'/resources/js/page/running/admin/templates/update-location.html'"></div>
    </pane>
    <pane title="Datos Contacto">
        <div ng-include src="'/resources/js/page/running/admin/templates/update-contacts.html'"></div>
    </pane>
    <pane title="Variantes">
        <div ng-include src="'/resources/js/page/running/admin/templates/update-variants.html'"></div>
    </pane>
</tabs>

2 番目のペインには GoogleMap があります。2 番目のペインが選択されているときに Google マップを更新したいと考えています。

コントローラーで選択したペインを取得する方法がわかりません。試してみまし$scope.panesたがundefined

4

1 に答える 1

8

問題を解決できる 3 つの方法を次に示します。

  1. コントローラーでメソッドを定義し、tabs 要素の属性でそのメソッドを指定し、tabs ディレクティブの Isolate スコープ定義で「&」構文を使用して、ペインが選択されたときにディレクティブが指定されたメソッドを呼び出せるようにします。
  2. 「selectedPane」プロパティを使用して、コントローラーのスコープでオブジェクトを定義します。tabs ディレクティブの Isolate スコープ定義で「=」構文を使用して、双方向のデータバインディングを有効にします。ペインが選択されるたびに、このプロパティを設定します。
  3. タブ ディレクティブにイベントを$emitさせ、コントローラーに $on を使用してイベントをリッスンさせます。

更新: @qopuir は、オプション 1 に関する詳細を求めまし た。
コントローラーのメソッドが次のようなものであるとします。

$scope.paneChanged = function(pane) {
    $scope.selectedPane = pane
    ...
}

tabs 要素では、属性でこの関数を指定しますpane-changed:

<tabs pane-changed="paneChanged(selectedPane)">

次に、tabs ディレクティブで「&」構文を使用してこのメ​​ソッドを呼び出すことができます。

.directive('tabs', function() {
    return {
        restrict: 'E',
        transclude: true,
        scope: { paneChanged: '&' },
        controller: function($scope, $element) {
            var panes = $scope.panes = [];

            $scope.select = function(pane) {
                angular.forEach(panes, function(pane) {
                    pane.selected = false;
                });
                pane.selected = true;
                $scope.paneChanged({selectedPane: pane});
            }
于 2013-02-18T21:57:45.897 に答える