Angularjs directives isolated scope + one-way data-binding not working for objects?

Question

I have created a custom directive which has two values. first is config object and second is data object. I modify this config and data objects inside my directive which is reflecting it in parent scope. Which is causing me error when I have to use directive multiple times.

I followed https://umur.io/angularjs-directives-using-isolated-scope-with-attributes/ and I am using isolated scope.

I want one way data binding for objects in isolated scope. Whatever I change in directive function it should not reflect in the parent scope.

below is scope of directive.

scope: {
    config: "&config",
    dataObj: "&dataObj"
}

here is how I access it in the link function of directive

var config = scope.config();
var dataObj= scope.dataObj();

I am assuming that pass by reference is happening here.

I am adding JSbin. check the console the value of object is changing and reflecting in parent scope.

https://jsbin.com/vagowe/edit?html,js,output

Answer 1

passing text is one-way binding(@) and passing object is two-way binding(=)

passing object as text

<custom-directive config="{{config}}"></custom-directive>

scope in directive

scope: {
  config: "@"
}

converting the string back to object in link

var config = angular.fromJson(scope.config);

Answer 2

You are correct, the issue is that your JavaScript objects are being passed by reference. Using a one-way binding copies the reference, but the reference will still point to the same object.

My impression from the Angular docs for directives has always been:

• The '@' binding is intended for interpolated strings
• The '=' binding is intended for structured data that should be shared between scopes
• The '&' binding is intended for repeatedly executing an expression that is bound to the parent scope

If you want to treat the bound object from the parent as immutable, you can create a deep copy the objects inside your link code using angular.copy :

var config = angular.copy(scope.config());
var dataObj = angular.copy(scope.dataObj());

Alternatively, you can use a two-way binding for this and copy the object in the same way:

scope: {
    config: "=",
    dataObj: "="
}

// ...
// Inside the link function of the directive.
// Note that scope.config and scope.dataObj are no longer functions!

var config = angular.copy(scope.config);
var dataObj = angular.copy(scope.dataObj);