angularjs rootscope and isolated scope

Question

Below is my html and javascript

<div ng-app="myApp" ng-controller="myCtrl">
  {{firstname}}
  <sample-directive></sample-directive>
</div>

JS

var app = angular.module("myApp", []);
app.run(function($rootScope){
  $rootScope.firstname = "Root scope value"
});
app.controller("myCtrl", function($scope) {

});

app.directive("sampleDirective",function(){
  return{
    template:"<div>{{firstname}}</div>",
    controller:['$scope',sampleDirectiveScope]
  };
});

function sampleDirectiveScope($scope){
  $scope.firstname = "scope value";
};

I am expecting "Root scope value" to be shown in the expression and "Scope value" to be displayed inside the directive tag

Why are both of them displaying Scope value?

Shouldn't the expression {{firstname}} get value from rootscope as I have changed the firstname only inside the directive's controller?

FIDDLE

J.P. · Answer 1 · 2017-02-22T09:36:07.070

The $scope of a directive by default points to the scope of whatever is above it. Use the scope property to adjust this.

var app = angular.module("myApp", []);
app.run(function ($rootScope) {
    $rootScope.firstname = "Root scope"
});
app.controller("myCtrl", function ($scope) {
    $scope.lastName = "Doe";
});

app.directive("sampleDirective", function () {
    return {
        template: "<div>{{firstname}}</div>",
        scope: {}, // isolated scope
        controller: ['$scope', sampleDirectiveScope]
    };
});

Using scope: {} provides an isolated scope, separated from the scope above. Within the {}, you can supply a list of properties you want to explicitly get passed in. Other possible values for scope: false (the default, point to scope above) and true (point to above scope through prototyping).

More here: https://docs.angularjs.org/guide/directive (scroll down a bit, or search for "isolate scope")

score 1 · Accepted Answer · edited May 23 '17 at 12:09

1

Sharing the scope is the default behavior of Angular-Directives. For a very detailed and complete answer check this post: https://stackoverflow.com/a/19775531/3686898

Here's your updated fiddle with a new scope:

app.directive("sampleDirective",function(){
  return{
    template:"<div>{{firstname}}</div>",
    scope: {},
    controller:['$scope',sampleDirectiveScope]
  };
});

https://jsfiddle.net/a1gf9fwc/2/

edited May 23 '17 at 12:09

Community

1
1

answered Feb 22 '17 at 09:29

Philipp Meissner

5,273
5
34
59

ah gotcha, so i just need to add `scope: true,` to get what i expected – Vignesh Subramanian Feb 22 '17 at 09:31
1

This or `scope: {}`, depending on what exactly you want to achieve :) (I usually go with a new and isolated scope, but that is for one personal preference and also depends on your needs. – Philipp Meissner Feb 22 '17 at 09:32
Thanks for the SO answer link. it was insightful :) – Vignesh Subramanian Feb 22 '17 at 09:41
You're welcome :) I hope you will succeed with your project! – Philipp Meissner Feb 22 '17 at 09:44

score 1 · Answer 3 · answered Feb 22 '17 at 09:33

1

use scope: {} in your directive

answered Feb 22 '17 at 09:33

Saurabh Agrawal

7,581
2
27
51

angularjs rootscope and isolated scope

3 Answers3