Question

我正在实现一个下拉列表，我正在编写自己的指令。我没有使用任何类型的输入元素，因此不使用ngModel。是否可以使用自定义属性进行双向绑定？

＆＃13;

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

＆＃13;

<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>

＆＃13;

请注意我没有添加CSS，使其看起来像下拉列表。我认为没必要。

我希望在datefilter.selected中获取所选值，然后使用它来执行其他操作。这甚至可能吗？如果没有任何解决方法？

Answer 1

暂时无视您的代码来设置课程，您可以使用以下代码从datefilter.selected.cycleStatus内部更改directive，它会反映在用户界面中。

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中的值（否则它可能会在其他元素强制消化周期后反映）

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

双向绑定在自定义指令中而不使用NgModel。可能？

1 个答案: