{"id":20314355,"url":"https://github.com/normandy72/directives-isolate-scope","last_synced_at":"2026-04-20T04:01:47.593Z","repository":{"id":153902757,"uuid":"587298142","full_name":"Normandy72/Directives-Isolate-Scope","owner":"Normandy72","description":"Directive’s Isolate Scope: “=” and “@”. Coursera course \"Single Page Web Applications with AngularJS\" by Yaakov Chaikin.","archived":false,"fork":false,"pushed_at":"2023-01-10T14:48:09.000Z","size":69,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-04T08:44:56.355Z","etag":null,"topics":["angular","angularjs","css","css3","html","html5","javascript","js"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Normandy72.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-01-10T12:33:47.000Z","updated_at":"2023-01-10T14:48:35.000Z","dependencies_parsed_at":null,"dependency_job_id":"138ae684-f614-413c-8bf3-97eedde43629","html_url":"https://github.com/Normandy72/Directives-Isolate-Scope","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Normandy72/Directives-Isolate-Scope","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Normandy72%2FDirectives-Isolate-Scope","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Normandy72%2FDirectives-Isolate-Scope/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Normandy72%2FDirectives-Isolate-Scope/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Normandy72%2FDirectives-Isolate-Scope/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Normandy72","download_url":"https://codeload.github.com/Normandy72/Directives-Isolate-Scope/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Normandy72%2FDirectives-Isolate-Scope/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32032302,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-20T00:18:06.643Z","status":"online","status_checked_at":"2026-04-20T02:00:06.527Z","response_time":94,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angularjs","css","css3","html","html5","javascript","js"],"created_at":"2024-11-14T18:14:54.694Z","updated_at":"2026-04-20T04:01:47.570Z","avatar_url":"https://github.com/Normandy72.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## Directive’s Isolate Scope: “=” and “@”\n### Isolate Scope\n```\nfunction MyDirective(){\n    var ddo = {\n        scope: {},\n        ...\n    };\n    return ddo;\n};\n```\n`scope: {}` - signals isolate scope: parent scope is NOT inherited\n\n### Bidirectional Property Binding\n#### --- 1 ---\n```\nfunction MyDirective(){\n    var ddo = {\n        scope: {\n            myProp: '=attributeName'\n        },\n        ...\n    };\n    return ddo;\n};\n```\n`myProp` - local scope property\n`'=attributeName'` - HTML template attribute name (`=` is Bidirectional Binding)\n#### --- 2 ---\n\n```\nfunction MyDirective(){\n    var ddo = {\n        scope: {\n            myProp: '='\n        },\n        ...\n    };\n    return ddo;\n};\n```\n`myProp: '='` - assumes the attribute is named the same as property name: my-prop\n\n#### --- 3 ---\n```\nfunction MyDirective(){\n    var ddo = {\n        scope: {\n            myProp: '=?'\n        },\n        ...\n    };\n    return ddo;\n};\n```\n`myProp: '=?'` - signifies that the attribute is optional\n\n#### Bidirectional Property Binding (HTML)\n`\u003cmy-directive my-prop=\"outerProp\"\u003e\u003c/my-directive\u003e`\n\n`my-prop` - attributes follow the same camelCase normalization (my-prop =\u003e myProp)\n\n### DOM Attribute Property Binding\n```\nfunction MyDirective(){\n    var ddo = {\n        scope: {\n            myProp: '@myAttribute'\n        },\n        ...\n    };\n    return ddo;\n};\n```\n`'@myAttribute'` - binds myProp to the value of DOM attribute my-attribute\n#### DOM Attribute Property Binding (HTML)\n`\u003cmy-directive my-attribute=\"{{outerProp}}\"\u003e\u003c/my-directive\u003e`\n\n`my-attribute` - as the value of outerprop changes, so does the value of my-attribute and so does the value of myProp inside the directive\n\nWe can do the regular interpolation inside of the my-attribute:\n\n`\u003cmy-directive my-attribute=\"Hi {{outerProp + '!'}}\"\u003e\u003c/my-directive\u003e`\n***\n##### _Summary_\n* Having isolate scope on the directive\n    * breaks the prototypal inheritance of the scope from the parent;\n    * makes the directive more independent, less coupled with the controller.\n* We pass values into the derective using scope bindings.\n* Bidirectional binding ('=') is such that directive scope property change affects the bound property and visa versa.\n* DOM attribute value binding ('@') always results in directive property being a string.\n    * Changes to DOM attribute value are propogated to the directive property, but not the other way around. \n***\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnormandy72%2Fdirectives-isolate-scope","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnormandy72%2Fdirectives-isolate-scope","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnormandy72%2Fdirectives-isolate-scope/lists"}