This repository has been archived by the owner on Sep 5, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 3.4k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix(mdAutocomplete): Compile autocomplete template against proper scope.
After the performance modifications to make autocomplete use the virtual repeat directive, the autocomplete no longer compiled the contents of the dropdown against the proper parent scope This PR fixes it by manually compiling against the proper parent scope and copying over the necessary `item` and `$index` properties. Fixes #4390. Fixes #4495. Closes #4391.
- Loading branch information
1 parent
316b4c8
commit 6681e82
Showing
4 changed files
with
77 additions
and
24 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
34 changes: 34 additions & 0 deletions
34
src/components/autocomplete/js/autocompleteParentScopeDirective.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,34 @@ | ||
angular | ||
.module('material.components.autocomplete') | ||
.directive('mdAutocompleteParentScope', MdAutocompleteItemScopeDirective); | ||
|
||
function MdAutocompleteItemScopeDirective($compile, $mdUtil) { | ||
return { | ||
restrict: 'AE', | ||
link: postLink, | ||
terminal: true | ||
}; | ||
|
||
function postLink(scope, element, attr) { | ||
var newScope = scope.$mdAutocompleteCtrl.parent.$new(); | ||
var relevantVariables = ['item', '$index']; | ||
|
||
// Watch for changes to our scope's variables and copy them to the new scope | ||
angular.forEach(relevantVariables, function(variable){ | ||
scope.$watch(variable, function(value) { | ||
$mdUtil.nextTick(function() { | ||
newScope[variable] = value; | ||
}); | ||
}); | ||
}); | ||
|
||
// Recompile the contents with the new/modified scope | ||
$compile(element.contents())(newScope); | ||
|
||
// Replace it if required | ||
if (attr.hasOwnProperty('mdAutocompleteReplace')) { | ||
element.after(element.contents()); | ||
element.remove(); | ||
} | ||
} | ||
} |
This file was deleted.
Oops, something went wrong.
6681e82
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Chips work now but, but autocomplete width is too small :/ I'm getting trimmed text with "..." at the end (issue #4450)
Autocomplete alone doesn't work, i'm getting empty rows (let me check this one more time)
6681e82
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@gpopovic Definitely let me know if this caused issues for the standard autocomplete and I will investigate.
6681e82
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@topherfangio one thing i notice is flicker ..
Since i can't use ng-bind because of md-highlight ...i often see on the first serach {{::item.text()}} for a really small time
6681e82
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@topherfangio i think i found a weird bug. When "item" in ng-repeat is not called item..search items are not displayed
http://codepen.io/anon/pen/gaajNM
6681e82
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@gpopovic Can you possibly open a new issue with a Codepen so that I can see exactly what you're doing?