2014-02-19 46 views
0

我用這個custom Drop-Down list guide在Angular 1.0.7上創建了一個將在所有瀏覽器上支持的花式dropdown list。 一切工作正常,你可以在這個Plunk看到。雙擊展開Angular 1.2.x上的自定義下拉列表

然後我決定升級到Angular 1.2.x. 關於新的角度似乎總是第一次運行第一次點擊並不擴大 drop-downlist。 後,我雙擊drop-down也可以再次工作正常像角1.0.7

示例 - Plunk

我怎樣才能讓我的drop-downlist對角的1.2.x首先點擊擴大而不是雙點擊我的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; 
     }); 
     } 
    }; 
}); 

回答

0

如果刪除 click="temp='active'" 你的代碼應與第一次點擊重新工作