Why are my AngularJS directives sharing scope?

Question

I\'ve tried to make a simple directive which displays a name and allows it to be change. When I put multiple directive on the name page they all seem to share the name attri

Answer 1

By default, directives share the same scope. But if needed, you can use isolated scope for your directives: use scope: {} as field in your directive definition.

app.directive('person', function () {

    function link ($scope, elem, attrs, ctrl) {     

        $scope.name = "OLD"        

        $scope.setName = function() {
            $scope.name = 'NEW';
        }
    }

    return {
      restrict: 'E',
      scope: {}
      replace: true,
      template: "Current name = {{name}}Change name
",
      link : link,
    }

  });