{
  "path": "/posts/my-unrequited-love-for-isolate-scope",
  "site": "at://did:plc:yy3apqjlms24kso7ahn7lbmb/site.standard.publication/3mova7c4nho2b",
  "tags": [
    "angularjs",
    "typescript",
    "javascript"
  ],
  "$type": "site.standard.document",
  "title": "My Unrequited Love for Isolate Scope",
  "description": "A new version of the serverError directive is presented without isolated scope after discovering directives can only create one isolated scope.",
  "publishedAt": "2014-08-12T00:00:00.000Z",
  "textContent": "I wrote a little while ago about creating a directive to present server errors on the screen in an Angular application. In my own (not so humble opinion), it was really quite nice. I was particularly proud of my usage of isolate scope. However, pride comes before a fall.\n\n\n\nIt turns out that using isolate scope in a directive is not always wise. Or rather – not always possible. And this is why:\n\nUg. What happened here? Well, I had a date field that I was using my serverError directive on. Nothing too controversial there. The problem came when I tried to plug in UI Bootstrap’s datepicker as well. That’s right the directives are fighting. Sad face.\n\nTo be more precise, it turns out that only one directive on an element is allowed to create an isolated scope. So if I want to use UI Bootstrap’s datepicker (and I do) – well my serverError directive is toast.\n\nA New Hope\n\nSo ladies and gentlemen, let me present serverError 2.0 – this time without isolated scope:\n\nserverError.ts\n\nserverError.js\n\nThis version of the serverError directive is from a users perspective identical to the previous version. But it doesn’t use isolated scope – this means it can be used in concert with other directives which do.\n\nIt works by pulling the name and serverError values off the attrs parameter. name is just a string - the value of which never changes so it can be used as is. serverError is an expression that represents the error dictionary that is used to store the server error messages. This is accessed through use of scope.$eval as an when it needs to.\n\nMy Plea\n\nWhat I’ve outlined here works. I’ll admit that usage of $eval makes me feel a little bit dirty (I’ve got “eval is evil” running through my head). Whilst it works, I’m not sure what I’ve done is necessarily best practice. After all the Angular docs themselves say:\n\n> *\\Best Practice:* Use the scope option to create isolate scopes when making components that you want to reuse throughout your app. \\\n\nBut as we’ve seen this isn’t always an option. I’ve written this post to document my own particular struggle and ask the question “is there a better way?” If you know then please tell me!",
  "canonicalUrl": "https://johnnyreilly.com/posts/my-unrequited-love-for-isolate-scope"
}