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

当分の間、コードを無視してクラスを設定するには、datefilter.selected.cycleStatusを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> 

コード：他のいくつかの要素は、ダイジェストを強制した後、自動的にUIの値を変更する責任があるscope.$apply()は、（それ以外の場合は、後半に反映している可能性が

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); 
     } 

注意サイクル）

ここでは例があります： http://jsfiddle.net/Lvc0u55v/5503/