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);