0

私はこのjsfiddleを作成しました:

http://jsfiddle.net/noahgoodrich/CDwfL/1/

ナビゲーション タブを管理および操作するための一連のディレクティブを作成しました。何らかの理由で、タブを閉じようとすると、最初は適切な配列要素が削除されますが、その要素は空の要素に置き換えられます。タブを開くことは期待どおりに機能するようです。

  app.directive('navTabOpen', ['$parse', 'navTabsService', function($parse, navTabsService) {
    return {
      restrict: 'A',
      link: function(scope, element, attrs) {
        scope.tabs = navTabsService.tabs;

        element.bind('click', function() {
          var tab = null;
          var b = scope.$eval(attrs.navTabOpen);

          for(var i=0;i<scope.tabs.length;i++) {
            scope.tabs[i].active = null;

            if(scope.tabs[i].tabId == b.id) {
              tab = i;
            }
          }

          if(tab == null) {
            tab = {tabId: b.id, name: b.name, stage: b.status, active: 'active'};
            scope.tabs.push(tab)
          } else {
            scope.tabs[tab].active = 'active';
          }
        });
      }
    }
  }])
  .directive('navTabClose', ['$location', 'navTabsService', function($location, navTabsService) {
    return {
      restrict: 'A',
      link: function(scope, element, attrs) {
        scope.tabs = navTabsService.tabs;

        element.bind('click', function() { 
          var tab = null;
          for(var i=0;i<scope.tabs.length;i++) {
            if(scope.tabs[i].tabId == attrs.tabId) {
              tab = i;
            }
          }

          if(tab != null) {
            if(scope.tabs[tab].active == 'active') {
              if(scope.tabs.length == 1) {
                $location.path('/');
              } else if(tab == 0) {
                scope.tabs[1].active = 'active';
              } else {
                scope.tabs[tab-1].active = 'active';
              }
            }

            scope.tabs.splice(tab,1);
            console.log(scope.tabs)
          }
        });
      }
    }
  }])

私がnavTabsService間違ってどのように使用しているかについて、誰かが洞察を提供できますか? または、ディレクティブとディレクティブのlink()機能に何かありますか?navTabOpennavTabClose

4

1 に答える 1

1

navTabディレクティブ (リンクされたフィドルで表示) で、ディレクティブ テンプレートはタグspanにネストされた要素を定義します。aスパン要素はnavTabCloseディレクティブを使用し、親aタグ要素はnavTabOpenディレクティブを使用します。両方のディレクティブのリンク関数は、クリック ハンドラーを定義します。がクリックされると両方のハンドラーが実行され、x予期しない動作が発生します。

app.directive('navTab', function () {
    return {
      restrict: 'A',
      template: '<li class="{{tab.active}} stage-{{tab.stage}}">'
                  +'<a href="/borrower/{{tab.tabId}}" nav-tab-open="{id: {{tab.tabId}}}" >{{tab.name}}'
                    +'<span class="close" nav-tab-close tab-id="{{tab.tabId}}">×</span>'
                  +'</a>'
                +'</li>',
      replace: true,
      scope: { tab: '=' }
    };
  })
于 2013-06-08T12:13:36.157 に答える