NgModel을 사용하지 않고 사용자 지정 문에서 양방향 바인딩. 가능한?

Question

나는 내 자신의 지시어를 쓰고있는 드롭 다운을 구현 중이다. 나는 어떤 종류의 입력 요소를 사용하지 않으므로 ngModel을 사용하지 않습니다. 맞춤 속성과 양방향 바인딩이 가능한가?

var mainApp = angular.module('mainApp', []); 
 

 
mainApp.directive('tableDropdown', ['$timeout', 
 
    function($timeout) { 
 
    return { 
 
     restrict: 'C', 
 
     scope: { 
 
     selectedFilter: '=?' 
 
     }, 
 
     link: function(scope, elem, attrs) { 
 
     $timeout(function() { 
 
      angular.element(elem).find('li:first-child').addClass(angular.element(elem).find('li').hasClass('selected') ? '' : 'selected'); 
 
      scope.selectedFilter.cycleStatus = null; 
 
      angular.element(elem).find('li').click(function(e) { 
 
       if (angular.element(this).closest('ul').hasClass('active')) { 
 
       angular.element(this).closest('ul').removeClass('active'); 
 
       scope.selectedFilter.selected = angular.element(this).attr('value'); 
 
       } else { 
 
       angular.element(this).closest('ul').addClass('active'); 
 
       scope.selectedFilter.selected = null; 
 
       } 
 
       angular.element(this).addClass('selected').siblings().removeClass('selected'); 
 
      }) 
 
     }, 0); 
 
     } 
 
    } 
 
    } 
 
])

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<th ng-app="mainApp" ng-init="datefilter.selected=null"> 
 
    --{{datefilter.selected}} 
 
    <ul class="tableDropdown" selected-filter="datefilter.selected"> 
 
    <li value="null" class="default"><span>Cycle Status</span> 
 
    </li> 
 
    <li value="completed"><span>Completed</span> 
 
    </li> 
 
    <li value="cancelled"><span>Cancelled</span> 
 
    </li> 
 
    </ul> 
 
</th>

나는 그것이 드롭처럼 보이게 만드는 CSS를 추가하지 않은 있습니다. 나는 그것이 필요하다고 생각하지 않았다.

선택한 값을 datefilter.selected에 가져 와서 다른 것을 사용하고 싶습니다. 그게 가능한가? 해결 방법이 없다면 해결 방법이 있습니까?

Answer 1

당분간 코드를 무시하고 클래스를 설정하려면 아래 코드를 에서 directive으로 변경하면 UI에 반영됩니다.

UI :

--{{datefilter.selected.cycleStatus}} 
    <ul class="tableDropdown" selected-filter="datefilter.selected"> 
    <li value="null" class="default"><span>Cycle Status</span> 
    </li> 
    <li value="completed"><span>Completed</span> 
    </li> 
    <li value="cancelled"><span>Cancelled</span> 
    </li> 
    </ul> 

코드 : 다른 요소는 다이제스트를 강제로 후

가

scope: { 
    selectedFilter: '=' 
    }, 
link: function(scope, elem, attrs) { 

     $timeout(function() { 
      scope.selectedFilter.cycleStatus = null; 
      elem.find('li').click( 
      function(e) { 
       scope.selectedFilter.cycleStatus =angular.element(this).attr('value'); 
       scope.$apply(); 
      }); 


     }, 0); 
     } 

주 자동으로 UI의 값을 변경을 담당하는 scope.$apply()이, (그렇지 않으면 늦게 반영 할 수 주기)

다음은 바이올린 예제입니다. http://jsfiddle.net/Lvc0u55v/5503/