మంత్లీ ఆర్కైవ్స్: ఫిబ్రవరి 2015

Trouble-shooting Tip For Angular Directives (లేక, Learning To Love Hyphens All Over Again)

I have a couple of apps that make $http.get() calls and I wanted to be able to show a nicely formatted error message with ugly error details hidden, but accessible.  ప్రధానంగా, ఈ:

image

And then if the user clicks on the error, they see more info:

image

Simple stuff.  Since the exact same potential error can appear in the administrative screen as well as the end user screen, it clearly called for a custom Angular directive.  నేను  found this outstanding series of articles (http://weblogs.asp.net/dwahlin/creating-custom-angularjs-directives-part-i-the-fundamentals) by the great Dan Wahlin.  Following his advice, I very quickly created a <hello-world> directive and moved on to my more complex error display squeegee. I ran into a bit of trouble with this more complex directive.  Happily, sort of by chance, I had told WebStorm (the editor I use these days) that the JS file was an Angular file and it helped me figure out the issue.  This is the code for the directive itself:

angular.module("CDLApp").directive("generalCdlErrorHandler", ఫంక్షన్() {

తిరిగి {
restrict: "E",
భర్తీ: నిజమైన,

scope: {
retrieveLastConfigurationError: "&"
},

టెంప్లేట్:
'<div class="alert alert-danger" role="alert" ng-init="doShowExpandedErrorDetails = true" ng-show="retrieveLastConfigurationError()">' +
' There was an I/O error or other error. This usually happens because configuration data file could not be ' +
' found or the configuration file contains inaccurate information (such as referencing a document library ' +
' that does not exist).' +
' <br />' +
' <div ng-show="doShowExpandedErrorDetails">' +
' <a href="#" ng-click="doShowExpandedErrorDetails = ! doShowExpandedErrorDetails">' +
' Click here to hide details.' +
' </ఒక>: ' +
' <br />' +
' <ముందు>{{retrieveLastConfigurationError() | json}}</ముందు>' +
' <br />' +
' </DIV>' +
' <div ng-show="!doShowExpandedErrorDetails">' +
' <a href="#" ng-click="doShowExpandedErrorDetails = ! doShowExpandedErrorDetails">' +
' Click here to expand error details.' +
' </ఒక>' +
' </DIV>' +
'</DIV>'
};
});

ప్రధానంగా, I’m creating a new element called a “generalCdlErrorHandler”.  It needs access to a function called retrieveLastConfigurationError and that’s handled in the scope object.  I probably could have just used the parent’s scope, but that feels lazy.  If anyone thinks I should have done that, I’d love to hear about it in the comments.

This was all fine, but I wasn’t getting anything.  No errors popped up in the console (at least once I fixed all the sx errors I created along the way).  I simply didn’t get any output from the directive.  I went and added some static text before the ng-show directive and I *did* get that. This made me think that perhaps the directive wasn’t allowed to implicitly create new vars like “doShowExpandedErrorDetails” or have an “ng-init” in there. 

I went back into the HTML to see if I had a type and this time WebStorm helped me out.  I had been passing in the retrieveLastConfigurationError function like this:

<general-cdl-error-handler retrieveLastConfigurationError="CDLController.retrieveLastConfigurationError()">
</general-cdl-error-handler>

But it really needed to be this:

<general-cdl-error-handler retrieve-last-configuration-error="CDLController.retrieveLastConfigurationError()">
</general-cdl-error-handler>

WebStorm was smart enough to know that it had to be hyphenated.  If it hadn’t provided that hint, I’d probably be still troubleshooting this స్మైల్.  Fun times!

The trick is this: not only is the directive element name hyphenated, so are any attributes you add to it.  Once I added the hyphens, it all worked great.  Dan’s tutorial happened to use short single names, so I didn’t make the connection.

ఈ ఎవరైనా సహాయపడుతుంది ఆశిస్తున్నాము.

</చివర>

undefinedనా బ్లాగ్ సబ్స్క్రయిబ్.

వద్ద ట్విట్టర్ లో నన్ను అనుసరించండి http://www.twitter.com/pagalvin

IE9 Really Doesn’t Like It When You Take A Shortcut With Your <వ్యవధి> టాగ్లు

I’ve fallen into a bad habit of using Chrome all the time.  It’s “bad” because the stuff I develop really needs to run on a lot of other web browsers, సహా, sadly IE8.  My work laptop has IE9 standard for whatever reason) and I was just doing a quick check to see what things looked like and … it wasn’t pretty.  ఉదాహరణకు:

image

It’s *supposed* to look like this:

image

 

Not only was it off, but my click events weren’t firing.  (Most of them, ఏమైనప్పటికి).

Visually, it looked like things started to go off the rails near the “Advanced Setup” link.  I dug into that part of the HTML and found that I had this line:

<span class="glyphicon glyphicon-new-window” />

That seems like allowable syntax (“Chrome version 40.02214.94 m” is fine with it). I went and changed it anyway, చూపిన విధంగా:

<span class="glyphicon glyphicon-new-window”></వ్యవధి>

That fixed it.

Such a tiny little thing caused such a huge mess of a screen.  Fun times.

This happened to be a quick fix, but it’s also the kind of thing that just gets your spine out of alignment when you see it.  ఉన్నాయి 500 lines of HTML in this little admin function and you just don’t want to find yourself digging amongst those weeds, ever స్మైల్.

</చివర>

undefinedనా బ్లాగ్ సబ్స్క్రయిబ్.

వద్ద ట్విట్టర్ లో నన్ను అనుసరించండి http://www.twitter.com/pagalvin