Skip to content
This repository has been archived by the owner on Sep 5, 2024. It is now read-only.

Commit

Permalink
fix(layouts): do not replace invalid attribute values
Browse files Browse the repository at this point in the history
Do not modify attribute values with default/fallback values; only update the attrs hashmap with the fallback value. This allows components using matching directives to not lose the originating value. e.g.

```html
< ui-layout layout="/api/sidebar.html" />
```

will become

```html
< ui-layout layout="/api/sidebar.html" class="layout-row" />
```
  • Loading branch information
ThomasBurleson committed Dec 11, 2015
1 parent 67ebee6 commit 16486db
Show file tree
Hide file tree
Showing 2 changed files with 7 additions and 2 deletions.
4 changes: 3 additions & 1 deletion src/core/services/layout/layout.js
Original file line number Diff line number Diff line change
Expand Up @@ -425,7 +425,9 @@
function buildUpdateFn(element, className, attrs) {
return function updateAttrValue(fallback) {
if (!needsInterpolation(fallback)) {
element.attr(className, fallback);
// Do not modify the element's attribute value; so
// uses '<ui-layout layout="/api/sidebar.html" />' will not
// be affected. Just update the attrs value.
attrs[attrs.$normalize(className)] = fallback;
}
};

This comment has been minimized.

Copy link
@ThomasBurleson

ThomasBurleson Dec 12, 2015

Author Contributor

The side effect is that with ngMaterial the <ui-layout class="layout-row"> will have an attached css style display:flex; flex-direction:row;... which may not be the desired.

The workaround may need to be:

ui-layout {
   display:block !important;
}
Expand Down
5 changes: 4 additions & 1 deletion src/core/services/layout/layout.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,10 @@ describe('layout directives', function() {

it('should ignore invalid values', function() {
var element = $compile('<div layout="humpty">Layout</div>')(pageScope);
expect(element.hasClass("layout-row")).toBeTruthy();

expect( element.attr('layout') ).toBe('humpty'); // original attribute value unmodified
expect(element.hasClass('layout-humpty')).toBeFalsy();
expect(element.hasClass("layout-row")).toBeTruthy(); // injected className based on fallback value
});

it('should support interpolated values layout-gt-sm="{{direction}}"', function() {
Expand All @@ -37,6 +39,7 @@ describe('layout directives', function() {
expect(element.hasClass('layout-gt-sm-column')).toBeTruthy();
});


/**
* For all breakpoints,
* - Test percentage values
Expand Down

0 comments on commit 16486db

Please sign in to comment.