여러 AngularJS와 지시어 사이에 공유 변수를 수정

Question

나는이 jsfiddle을 만든

: I 관리 및 탐색 탭을 조작하는 지침의 집합을 만들었습니다

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을 잘못 사용하고 있는지 통찰력을 제공 할 수 있습니까? 또는 navTabOpen 및 navTabClose 지시문에 link() 기능이있는 항목이 있습니까?

Answer 1

navTab 지시어 (연결된 피들에서 볼 수 있음)에서 지시문 템플릿은 태그에 중첩 된 span 요소를 정의합니다. Span 요소는 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: '=' } 
    }; 
    })