javascript - 自定义指令中的两种方式绑定(bind)，无需使用 NgModel。可能的？

Question

我正在实现一个下拉菜单，我正在为其编写自己的指令。我没有使用任何类型的输入元素，因此没有使用 ngModel。自定义属性可以进行两种方式绑定(bind)吗？

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，它会反射(reflect)在 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);
      }

请注意 scope.$apply() ，它负责自动更改 UI 中的值(否则它可能会在某些其他元素强制摘要循环后反射(reflect)较晚)

这是一个 fiddle 示例: http://jsfiddle.net/Lvc0u55v/5503/