앵귤러 디렉티브의 부트 스트랩 드롭 다운 메뉴

Question

여기 내 질문입니다. 도와 주셔서 감사합니다!

의도

내가이 상태 개요를 얻을 필요가있는 페이지를,의 프로젝트라고 할 수 있습니다. 내 모델에는 상태 및 성능 속성이 있습니다. 트랙에있는 경우 녹색 원을 표시하고 지연되면 빨간색으로 표시합니다. 각도 및 부트 스트랩을 사용하여 부트 스트랩 드롭 다운을 감싸는 맞춤 지시문을 작성하고 모델 속성을 다음과 같이 바인딩합니다. 업데이트 되십시오. 상태를 "On Track"에서 "Delayed"로 변경하려면 원을 클릭하고 드롭 다운이 열리 며 올바른 메뉴 항목을 선택하면 모델이 변경되고 이에 따라 원 색상이 업데이트됩니다.

문제

는만큼 내가 1 지시자를 넣어, evething 잘 작동합니다. 둘 이상을 삽입하면 마지막 하나만 업데이트됩니다. 하나의 원을 클릭하면 메뉴가 열리지 만 변경되는 모델은 마지막 것이고 올바른 것이 아닙니다.

예

내 지시어 : JSFiddle

당신이 왜이 일어나고에 대한 몇 가지 힌트와 함께 이메일에 회신 해 주시기 바랍니다 수 : 당신은 여기에 예를 볼 수 있습니다

angular.module("samson", []) 
.controller("overviewCtrl", function ($scope) { 
    $scope.status = "On track"; 
    $scope.tsaStatus = "Completed"; 
    $scope.performance = "Risk of delay"; 
}) 
.directive("clickableStatusIcon", function() { 
    return { 
     replace: true, 
     restrict: 'E', 
     transclude: true, 
     template: '<div class="dropdown">' + 
     '<div class="circle on-track dropdown-toggle" data-toggle="dropdown" aria-expanded="true"></div>' + 
     '<ul class="dropdown-menu" role="menu">' + 
     '<li role="presentation"><a data-ng-click="onTrack()" role="menuitem" tabindex="-1" href="javascript:;">On track</a></li>' + 
     '<li role="presentation"><a data-ng-click="riskOfDelay()" role="menuitem" tabindex="-1" href="javascript:;">Risk of delay</a></li>' + 
     '<li role="presentation"><a data-ng-click="delayed()" role="menuitem" tabindex="-1" href="javascript:;">Delayed</a></li>' + 
     '<li role="presentation"><a data-ng-click="completed()" role="menuitem" tabindex="-1" href="javascript:;">Completed</a></li>' + 
     '</ul>' + 
     '</div>', 
     scope: { 
      target: '=ngModel', 
      name: '@' 
     }, 
     require: 'ngModel', 

     link: function ($scope, elem, attr) { 

      classCleaner = function (newValue) { 
       angular.element(elem.children()[0]).removeClass("on-track risk-of-delay delayed complete").addClass(status2ClassMapping[newValue]); 
       $scope.target = newValue; 
      } 

      status2ClassMapping = { 
       "On track": "on-track", 
       "Risk of delay": 'risk-of-delay', 
       "Delayed": "delayed", 
       "Completed": "complete" 
      }; 

      $scope.onTrack = function() { 
       classCleaner("On track"); 
      } 

      $scope.riskOfDelay = function() { 
       classCleaner("Risk of delay"); 
      } 

      $scope.delayed = function() { 
       classCleaner("Delayed"); 
      } 

      $scope.completed = function() { 
       classCleaner("Completed"); 
      } 

      classCleaner($scope.target); 
     } 
    } 
}); 

? 코드가 깨끗한 것은 아니며 그 사실을 알고 있습니다. 문자열 비교, text2 CSS 클래스 매핑 등 ... 못생긴하지만 템플릿 및 범위 함수를 정의하는 방식에 중점을 둡니다. 문제가 있다는 것을 두려워하지만 왜 그 이유는 모르겠다.

감사 지침의 모든 기능에

Answer 1

추가 $ 범위 많은 :

$scope.classCleaner 
$scope.status2ClassMapping 

그런 다음 그것을 작동합니다. 또한 ng-repeat를 사용하여 목록을 채우고 ng-class를 사용하여 요소 클래스를 변경하는 것이 좋습니다.