AngularJS-brackets
AngularJS-brackets copied to clipboard
angular-ui
Quick Edit Conflict?
When you use a directive that is restricted to an element Quick Edit seems to prefer the CSS definition instead of the directive (and won't find the directive). It does work if your directive is restricted to an attribute though.
Yeah... I'm not 100% sure how we should go about handling css vs directives. Any interest in helping fix this yourself? I can provide instructions.
Sure, would certainly take a look at what's involved, we're invested in the outcome so to speak - it's fantastic when it works for the attribute ones (so kudos to you, btw).
So in brackets go to Debug > Show Developer Tools. In the Source tab, hit CTRL/CMND + O and type in 'angular' to filter all the files down to the ones from this extension.
The source files are located in ~/Library/Application Support/Brackets/extensions/user/AngularJS-Brackets
The potentially problematic lines of code are here: https://github.com/angular-ui/AngularJS-brackets/blob/320422af9f2ee737fa0bdfd81cbed25a7a6e67af/main.js#L30-L34
but if they are working fine then chances are CSS just takes a higher priority than this extension, in which case there's nothing that can really be done without bugging the brackets team. Perhaps @peterflynn could shed some light
@ProLoser @scottcc Not being familiar with Angular I'm not sure what the HTML syntax for "directive restricted to an element" looks like. Can you point me to an example?
@peterflynn he's talking about <directive> instead of <div directive>
In my test.html, if you do a <my-directive> tag it should work but apparently CSS rules might be winning out over this extension?
Yeah -- if the cursor is on a tag name, id attribute, or class attribute then the CSSInlineEditor provider will respond by searching for matching CSS rules.
Is it possible to synchronously determine whether a tag name is a directive vs. standard HTML? If so, you could register your provider as a higher-priority one and defer to the CSS provider for regular tags...
@peterflynn Classes, HTML Comments, Attributes and Tags are all potentially directives, so there IS some crossover. However, it's fairly likely that if you choose to expand you wanted to edit the directive over the CSS, although it would be cool if the list of files on the right showed both CSS AND JS locations.
I would prefer angular to take priority over CSS
@ProLoser Yeah, being able to mix result sets from different providers is something we've discussed a few times, but it's not currently supported by the API.
So ideally for now the Angular provider would show results if the context is an Angular directive, and let the CSS provider show its results otherwise. The trick is figuring out the "if the context is an Angular directive" part -- can that be done synchronously? (The provider needs to make a yes/no decision synchronously). Do all Angular custom tags contain a "-"? If so then that's a simple way to answer the question that, even if not 100% accurate, may well be good enough.
I'm having the same issue. I would prefer the AngularJS plugin took priority and if it doesn't handle it then CSSInlineEditor could choose to handle it.
Currently <my-directive> is getting caught by the * rule in bootstrap.css so doesn't make its way to the AngularJS plugin. I also couldn't see myself styling a <my-directive> tag as I would have it replaced by its template.
@peterflynn Yeah I feel like if no angular matches are found (very likely) THEN the CSS editor can be run to look for matches, etc.
@ProLoser Unfortunately that's not quite how the API works today. The provider has to synchronously decide if it wants to respond -- i.e. before it has time to run the whole search. So the decision has to be made without reading the contents of other files in the project. What do you think about my suggestion above regarding looking for a "-" in the tag name? My understanding was that was basically required of all custom tags (Angular or otherwise) in order to keep them isolated from collisions with (future) valid HTML 5 tags -- so could be a good way to distinguish between the two quickly...
@peterflynn unfortunately that won't work. Directives are highly versatile.
My thought was perhaps storing an entire index / cache of all directives, because in reality you wouldn't have more than 100 or 1000 combined with controllers, MAX. This collection would be really easy to iterate over and a response could be given synchronously. The initial index could be async of course, and the filesystem would need to be monitored for changes or something.
Great feedback here. We'll see what we can do! Unfortunately it might take some time given other commitments so (to any other onlookers) feel free to race us to it :)
