不使用 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 内部更改 datefilter.selected.cycleStatus，它会反映在 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);
      }

注意 scope.$apply() ，它负责自动更改 UI 中的值（否则它可能会在其他一些元素强制摘要循环后反映迟到）

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

不使用 NgModel 的自定义指令中的两种方式绑定。可能的？

Two way Binding in a custom directive without using NgModel. Possible?

javascript

angularjs

angular-ngmodel