What is the difference between scope:{} and scope:true inside directive?

by

Both scope: true and scope:{} will create a child scope for the directive. But,

scope:true will prototypically inherit the properties from the parent(say the controller where the directive comes under) where as scope:{} will not inherit the properties from the parent and hence called isolated

For instance lets say we have a controller c1 and two directives d1 and d2,

app.controller('c1', function($scope){
  $scope.prop = "some value";
});

.directive('d1', function() {
  return {
    scope: true
  };
});

.directive('d2', function() {
  return {
    scope: {}
  };
});

<div ng-controller="c1">
  <d1><d1>
  <d2><d2>
</div>

d1(scope:true) will have access to c1 scope -> prop where as d2 is isolated from the c1 scope.

Note 1: Both d1 and d2 will create a new scope for each directive defined.

Note 2: Apart from the difference between the two, for scope:true – Any changes made to the new child scope will not reflect back to the parent scope. However, since the new scope is inherited from the parent scope, any changes made in the c1 scope(the parent scope) will be reflected in the directive scope.

Tip: Use scope:{} or isolated scope for reusable angular directives. So that you won’t end up messing with the parent scope properties

More Related Contents:

  1. How to cancel an $http request in AngularJS?
  2. htaccess redirect for Angular routes
  3. AngularJS. How to call controller function from outside of controller component
  4. When writing a directive in AngularJS, how do I decide if I need no new scope, a new child scope, or a new isolated scope?
  5. How to use $http promise response outside success handler
  6. Can I use ng-model with isolated scope?
  7. AngularJS : Where to use promises?
  8. AngularJS. When select have ng-model attribute, ng-selected not working
  9. How to use ng-repeat for dictionaries in AngularJs?
  10. Confused about Angularjs transcluded and isolate scopes & bindings
  11. ng-repeat not updating on update of array
  12. get original element from ng-click
  13. angularjs share data config between controllers
  14. Using ng-app without a value
  15. Angular $http vs service vs ngResource
  16. AngularJS watch array of objects for data change
  17. When to use the AngularJS `$onInit` Life-Cycle Hook
  18. Refreshing page gives “Page not found”
  19. AngularJS: ngRoute Not Working
  20. ERROR in Cannot find module ‘node-sass’
  21. Angular directive name: only lower case letters allowed?
  22. when $digest cycle is called?
  23. Setting default value in select drop-down using Angularjs
  24. Using Firebase Auth to access the Google Calendar API
  25. Why ng-scope is added to javascript inline of my partial view and makes alert not working?
  26. How can I add some small utility functions to my AngularJS application?
  27. angularjs getting previous route path
  28. AngularJS ng-model-options getter-setter
  29. When to use double braces {{}} in angularJS
  30. Angular reload current route and reload the current template

Leave a Comment