Do angular directives on the same DOM element share a scope?

Question

If two angular directives are attached to the same DOM element do they both share the same scope? The angular documentation implicitly indicates this is the case, If so, what is the best practice for preventing name spacing issues between directives?

E.g.

<div directive-1 directive-2>
</div>

where directive-1 and directive-2 have set scope: true or scope: {...}

here you have an explanation under **"directives"** : http://stackoverflow.com/questions/14049480/what-are-the-nuances-of-scope-prototypal-prototypical-inheritance-in-angularjs — Ivan Chernykh, Sep 30 '13 at 10:21

score 0 · Answer 1 · answered Jun 09 '15 at 13:46

Best practice for these kind of things is the require property in directives, you should be able to require the controller of directive-1 and through that access its scope. But now you also have a shareable API between directives.

app.directive('directive1', function () {
  return {
    require: '^directive1',
    controller: ['$scope', function ($scope) {
      this.$scope = $scope;

      this.sharedFn = function () {

      };

      return this;
    }]
  };
});

app.directive('directive2', function () {
  return {
    require: '^directive1',
    link: function (scope, element, attrs, directive1Ctrl) {
      console.log(directive1Ctrl);
    }
  };
});

app.directive('directive3', function () {
  return {
    require: '^directive1',
    link: function (scope, element, attrs, directive1Ctrl) {
      console.log(directive1Ctrl);
    }
  };
});

Hope this helps

Do angular directives on the same DOM element share a scope?

1 Answers1