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

Closes #2170

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

Before:
  ```html
  <button class="dropdown-toggle" ...>
  ```
  After:
  ```html
  <button class="dropdown-toggle" dropdown-toggle ...>
  ```
  • Loading branch information
@bekos @chrisirhc
bekos authored and chrisirhc committed Sep 26, 2014
1 parent 758edbb commit 192768e
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',

This comment has been minimized.

Sign in to view

Copy link
@rafacustodio

rafacustodio Nov 8, 2014

This update is not working, as you see you removed the A as well.

This comment has been minimized.

Sign in to view

Copy link
@chrisirhc

chrisirhc Nov 8, 2014

Contributor

The A attribute is a default, as per documentation on https://code.angularjs.org/1.2.26/docs/api/ng/service/$compile .
If you're experiencing an issue, could you please open an issue with a Plunker that demonstrates the problem you're seeing?

This comment has been minimized.

Sign in to view

Copy link
@rafacustodio

rafacustodio Nov 9, 2014

Here is the plunker http://plnkr.co/edit/Ycwi4jOD4qbwZweWRDVS, and for the record I'm using the 1.3.0 angular version.

This comment has been minimized.

Sign in to view

Copy link
@PeterEnevoldsen

PeterEnevoldsen Jun 18, 2015

Above it is stated the A attribute is the default. But that is no longer the case for angular 1.4 as the documentation on https://docs.angularjs.org/api/ng/service/$compile#directive-definition-object states "String of subset of EACM which restricts the directive to a specific directive declaration style. If OMITTED, the defaults (ELEMENTS and ATTRIBUTES) are used.". So previously the directive could be used on AC but now it can be used on AE
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

0 comments on commit 192768e

Please sign in to comment.