Question

我使用此custom Drop-Down list guide在Angular 1.0.7上创建了一个在所有浏览器上都支持的花哨dropdown list。你可以在Plunk中看到一切正常。

然后我决定升级到Angular 1.2.x. 在新的角度上，似乎始终在第一次运行时第一次点击不会扩展 drop-down list。双击drop-down后，它再次正常工作，如Angular 1.0.7

示例 - Plunk

如何在首次点击时扩展Angular 1.2.x上的drop-down list，而不是双击application首次运行？

我的HTML：

  <body ng-controller="VotesCtrl">
    <p>This is from index.html</p>
    <div dropdown="" class="{{temp}} wrapper-dropdown-3" ng-click="temp='active'">
      <i class="arrow"></i>
      <span>{{selected}}</span>
      <ul class="dropdown">
        <li ng-repeat="status in statuses">
          <a ng-click="change(status)" href="#">{{status}}</a>
        </li>
      </ul>
    </div>
  </body>

我的JS：

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


//controllers

webApp.controller ('VotesCtrl', function ($scope) {
    $scope.statuses = ["Approved","Pending","Trash","Spam"];
    $scope.selected = $scope.statuses[0];  

    $scope.change = function(status) {
       console.log(status);
       $scope.selected = status;     
    };
});


webApp.controller ('tempCtrl', function ($scope) {
    $scope.statuses = ["Approved","Pending","Trash","Spam"];
    $scope.selected = $scope.statuses[0];  

    $scope.change = function(status) {
       $scope.selected = status;     
    };
});
//services



//directive

webApp.directive('dropdown', function() {
    angular.element(document).click(function() {
      // all dropdowns
      angular.element('.wrapper-dropdown-3').removeClass('active');
    });  
    return {
        restrict: 'A',
        link: function(scope, elem, attrs) {

          // var dd = new DropDown(elem);
          angular.element(elem).on('click', function(event) {
            angular.element(this).toggleClass('active');
            return false;
        });
      }
    };
});

Answer 1

如果你删除了 click="temp='active'" 您的代码应该在第一次单击时再次工作

双击以展开Angular 1.2.x上的自定义下拉列表

1 个答案: