Skip to content
This repository has been archived by the owner on May 29, 2019. It is now read-only.

Commit

Permalink
fix(dropdown): remove C restrictions to avoid conflicts
Browse files Browse the repository at this point in the history 
Fixes #2156

BREAKING CHANGES: Both `dropdown` and `dropdown-toggle` are only attribute directives

Before:
  ```html
  <btutton class="dropdown-toggle" ...>
  ```
  After:
  ```html
  <btutton class="dropdown-toggle" dropdown-toggle ...>
  ```

Closes #2170
  • Loading branch information
@bekos @pkozlowski-opensource
bekos authored and pkozlowski-opensource committed Jul 22, 2014
1 parent e62ab94 commit 7512b93
Show file tree
Hide file tree
Showing 4 changed files with 16 additions and 18 deletions.
4 changes: 2 additions & 2 deletions misc/demo/index.html
View file
Expand Up @@ -38,8 +38,8 @@
<a href="#top" role="button" class="navbar-brand">
UI Bootstrap
</a>
<li class="dropdown">
<a role="button" class="dropdown-toggle">
<li class="dropdown" dropdown>
<a role="button" class="dropdown-toggle" dropdown-toggle>
Directives <b class="caret"></b>
</a>
<ul class="dropdown-menu">
Expand Down
8 changes: 4 additions & 4 deletions src/dropdown/docs/demo.html
View file
@@ -1,8 +1,8 @@

<div ng-controller="DropdownCtrl">
<!-- Simple dropdown -->
<span class="dropdown" on-toggle="toggled(open)">
<a href class="dropdown-toggle">
<span class="dropdown" dropdown on-toggle="toggled(open)">
<a href class="dropdown-toggle" dropdown-toggle>
Click me for a dropdown, yo!
</a>
<ul class="dropdown-menu">
Expand All @@ -14,7 +14,7 @@

<!-- Single button -->
<div class="btn-group" dropdown is-open="status.isopen">
<button type="button" class="btn btn-primary dropdown-toggle" ng-disabled="disabled">
<button type="button" class="btn btn-primary dropdown-toggle" dropdown-toggle ng-disabled="disabled">
Button dropdown <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
Expand All @@ -29,7 +29,7 @@
<!-- Split button -->
<div class="btn-group" dropdown>
<button type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger dropdown-toggle">
<button type="button" class="btn btn-danger dropdown-toggle" dropdown-toggle>
<span class="caret"></span>
<span class="sr-only">Split button!</span>
</button>
Expand Down
2 changes: 0 additions & 2 deletions src/dropdown/dropdown.js
View file
Expand Up @@ -114,7 +114,6 @@ angular.module('ui.bootstrap.dropdown', [])

.directive('dropdown', function() {
return {
restrict: 'CA',
controller: 'DropdownController',
link: function(scope, element, attrs, dropdownCtrl) {
dropdownCtrl.init( element );
Expand All @@ -124,7 +123,6 @@ angular.module('ui.bootstrap.dropdown', [])

.directive('dropdownToggle', function() {
return {
restrict: 'CA',
require: '?^dropdown',
link: function(scope, element, attrs, dropdownCtrl) {
if ( !dropdownCtrl ) {
Expand Down
20 changes: 10 additions & 10 deletions src/dropdown/test/dropdown.spec.js
View file
Expand Up @@ -26,7 +26,7 @@ describe('dropdownToggle', function() {

describe('basic', function() {
function dropdown() {
return $compile('<li class="dropdown"><a href dropdown-toggle></a><ul><li><a href>Hello</a></li></ul></li>')($rootScope);
return $compile('<li dropdown><a href dropdown-toggle></a><ul><li><a href>Hello</a></li></ul></li>')($rootScope);
}

beforeEach(function() {
Expand Down Expand Up @@ -99,20 +99,20 @@ describe('dropdownToggle', function() {
});

it('should not toggle if the element has `disabled` class', function() {
var elm = $compile('<li class="dropdown"><a class="disabled" dropdown-toggle></a><ul><li>Hello</li></ul></li>')($rootScope);
var elm = $compile('<li dropdown><a class="disabled" dropdown-toggle></a><ul><li>Hello</li></ul></li>')($rootScope);
clickDropdownToggle( elm );
expect(elm.hasClass('open')).toBe(false);
});

it('should not toggle if the element is disabled', function() {
var elm = $compile('<li class="dropdown"><button disabled="disabled" dropdown-toggle></button><ul><li>Hello</li></ul></li>')($rootScope);
var elm = $compile('<li dropdown><button disabled="disabled" dropdown-toggle></button><ul><li>Hello</li></ul></li>')($rootScope);
elm.find('button').click();
expect(elm.hasClass('open')).toBe(false);
});

it('should not toggle if the element has `ng-disabled` as true', function() {
$rootScope.isdisabled = true;
var elm = $compile('<li class="dropdown"><div ng-disabled="isdisabled" dropdown-toggle></div><ul><li>Hello</li></ul></li>')($rootScope);
var elm = $compile('<li dropdown><div ng-disabled="isdisabled" dropdown-toggle></div><ul><li>Hello</li></ul></li>')($rootScope);
$rootScope.$digest();
elm.find('div').click();
expect(elm.hasClass('open')).toBe(false);
Expand All @@ -125,7 +125,7 @@ describe('dropdownToggle', function() {

it('should unbind events on scope destroy', function() {
var $scope = $rootScope.$new();
var elm = $compile('<li class="dropdown"><button ng-disabled="isdisabled" dropdown-toggle></button><ul><li>Hello</li></ul></li>')($scope);
var elm = $compile('<li dropdown><button ng-disabled="isdisabled" dropdown-toggle></button><ul><li>Hello</li></ul></li>')($scope);
$scope.$digest();

var buttonEl = elm.find('button');
Expand Down Expand Up @@ -171,7 +171,7 @@ describe('dropdownToggle', function() {
describe('without trigger', function() {
beforeEach(function() {
$rootScope.isopen = true;
element = $compile('<li class="dropdown" is-open="isopen"><ul><li>Hello</li></ul></li>')($rootScope);
element = $compile('<li dropdown is-open="isopen"><ul><li>Hello</li></ul></li>')($rootScope);
$rootScope.$digest();
});

Expand All @@ -189,7 +189,7 @@ describe('dropdownToggle', function() {
describe('`is-open`', function() {
beforeEach(function() {
$rootScope.isopen = true;
element = $compile('<li class="dropdown" is-open="isopen"><a href dropdown-toggle></a><ul><li>Hello</li></ul></li>')($rootScope);
element = $compile('<li dropdown is-open="isopen"><a href dropdown-toggle></a><ul><li>Hello</li></ul></li>')($rootScope);
$rootScope.$digest();
});

Expand Down Expand Up @@ -225,7 +225,7 @@ describe('dropdownToggle', function() {
beforeEach(function() {
$rootScope.toggleHandler = jasmine.createSpy('toggleHandler');
$rootScope.isopen = false;
element = $compile('<li class="dropdown" on-toggle="toggleHandler(open)" is-open="isopen"><a dropdown-toggle></a><ul><li>Hello</li></ul></li>')($rootScope);
element = $compile('<li dropdown on-toggle="toggleHandler(open)" is-open="isopen"><a dropdown-toggle></a><ul><li>Hello</li></ul></li>')($rootScope);
$rootScope.$digest();
});

Expand All @@ -247,7 +247,7 @@ describe('dropdownToggle', function() {
beforeEach(function() {
$rootScope.toggleHandler = jasmine.createSpy('toggleHandler');
$rootScope.isopen = true;
element = $compile('<li class="dropdown" on-toggle="toggleHandler(open)" is-open="isopen"><a dropdown-toggle></a><ul><li>Hello</li></ul></li>')($rootScope);
element = $compile('<li dropdown on-toggle="toggleHandler(open)" is-open="isopen"><a dropdown-toggle></a><ul><li>Hello</li></ul></li>')($rootScope);
$rootScope.$digest();
});

Expand All @@ -269,7 +269,7 @@ describe('dropdownToggle', function() {
describe('`on-toggle` without is-open', function() {
beforeEach(function() {
$rootScope.toggleHandler = jasmine.createSpy('toggleHandler');
element = $compile('<li class="dropdown" on-toggle="toggleHandler(open)"><a dropdown-toggle></a><ul><li>Hello</li></ul></li>')($rootScope);
element = $compile('<li dropdown on-toggle="toggleHandler(open)"><a dropdown-toggle></a><ul><li>Hello</li></ul></li>')($rootScope);
$rootScope.$digest();
});

Expand Down

1 comment on commit 7512b93

@JobaDiniz
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi, I think you guys should add a warning in the changelog about this breaking change.

Please sign in to comment.