{"id":10,"date":"2016-02-08T03:48:27","date_gmt":"2016-02-08T03:48:27","guid":{"rendered":"http:\/\/165.225.137.195\/blog\/?p=4"},"modified":"2016-02-08T03:48:27","modified_gmt":"2016-02-08T03:48:27","slug":"directives-scope-in-angularjs","status":"publish","type":"post","link":"https:\/\/www.bhoomabrsr.com\/blog\/index.php\/2016\/02\/08\/directives-scope-in-angularjs\/","title":{"rendered":"Directives scope in AngularJS"},"content":{"rendered":"

Scope is context where the model is stored so that controllers, directives and expressions can access it.\u00a0<\/span>By default, each directive inherits its parent\u2019s scope, which is passed to it in the link\u00a0<\/span>function. below three options are described scope creation in angularjs,<\/span><\/p>\n

Scope:<\/span>false <\/span>(default) <\/span>which basically tells AngularJS that the directive scope is\u00a0<\/span>the same as the parent scope.
\n<\/span>Example<\/span>: If scope:false means it will simply return same address location of parent scope.
\n<\/span>working <\/span>Fiddle<\/a><\/span>.<\/span><\/p>\n

\nreturn {\n    restrict: 'A',\n      scope:false,\n    template: '',\n    link: function(scope, element, attrs) {\n        console.log(scope);\n        scope.data = scope.data + " + directive postfix";\n        child = scope;\n    }\n<\/pre>\n
Result<\/span>:<\/span><\/p>\n
\u00a0\"image01\"<\/p>\n
Scope:true<\/span>\u00a0creates new scope object but never override parent properties. The directive thus gets access to all the variables and functions from the parent scope, but any modifications it makes are not available in the parent.
\n<\/span>Example<\/span>: create a child scope prototypically inherited with scope: true.
\n<\/span>working <\/span>Fiddle<\/a><\/span>.<\/span><\/p>\n
\nreturn {\n    restrict: \u2018A\u2019,\n      scope:true,\n    template: \u201d,\n    link: function(scope, element, attrs) {\n        console.log(scope);\n        scope.data = scope.data + \u201d + directive postfix\u201d;\n        child = scope;\n    }\n<\/pre>\n
Result<\/span>:<\/span><\/p>\n
\"image00\"<\/p>\n
Scope:{} <\/span>(isolated scope) This scope does not inherit anything from the parent, and any data that the parent scope needs to share with this directive needs to be passed in through HTML attributes
\n<\/span>Example<\/span>: create an isolated scope with scope: {} then you can bind some property to parent scopes with ‘@’, ‘&’, ‘=’.
\n<\/span>working <\/span>Fiddle<\/a><\/span>.<\/span><\/p>\n
\nreturn {\n    restrict: \u2018A\u2019,\n      scope:{},\n    template: \u201d,\n    link: function(scope, element, attrs) {\n        console.log(scope);\n        scope.data = scope.data + \u201d + directive postfix\u201d;\n        child = scope;\n    }\n<\/pre>\n
Result<\/span>:<\/span><\/p>\n
\"image02\"<\/p>\n","protected":false},"excerpt":{"rendered":"
Scope is context where the model is stored so that controllers, directives and expressions can access it.\u00a0By default, each directive inherits its parent\u2019s scope, which is passed to it in the link\u00a0function. below three options… More<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2,3,15],"tags":[],"class_list":["post-10","post","type-post","status-publish","format-standard","hentry","category-angular","category-angular-1-4","category-javascript"],"_links":{"self":[{"href":"https:\/\/www.bhoomabrsr.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/10","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bhoomabrsr.com\/blog\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bhoomabrsr.com\/blog\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bhoomabrsr.com\/blog\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bhoomabrsr.com\/blog\/index.php\/wp-json\/wp\/v2\/comments?post=10"}],"version-history":[{"count":0,"href":"https:\/\/www.bhoomabrsr.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/10\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.bhoomabrsr.com\/blog\/index.php\/wp-json\/wp\/v2\/media?parent=10"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bhoomabrsr.com\/blog\/index.php\/wp-json\/wp\/v2\/categories?post=10"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bhoomabrsr.com\/blog\/index.php\/wp-json\/wp\/v2\/tags?post=10"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}