two way binding on primitive variables in angularjs directive

Question

Trying to have 2 way binding on an AngularJS directive while using primitive objects is not working, for example:

<custom-directive ng-model="variable"></custom-directive>

how can this be achieved?

Answer 1

In order to have 2 way binding in javascript (not just angularjs), we have to pass an object (this is caused by javascript's evaluation strategy - can read more about it here https://en.wikipedia.org/wiki/Evaluation_strategy#Call_by_sharing). basically what is happening is that when we pass a primitive variable, its been passed by value and re-created, instead of been passed by reference. only objects are passed by reference.

So this issue can be solved by passing the variable's parent object, for example:

<custom-directive ng-model-name="variable" ng-model-parent="parentObj"></custom-directive>

and then, modifying in object in the directive as following:

parentObj[variable] = "whatever";

this way, we will keep the connection between the variable to the parentObj.

another option would be passing the model with the parent obj, for example:

<custom-directive ng-model="parentObj.variable"></custom-directive>

the dot is an important part of this example. its actually a best practice by angular to always pass variables with the parentObj-dot-property.

for additional information, angularjs actually has a documentation about it https://github.com/angular/angular.js/wiki/Understanding-Scopes

Answer 2

I just realized that if your directive isn't inside an ng-if it will work with primitive bindings. Maybe the problem is that your bind is inside an ng-if. Try to use ng-show instead. Maybe it will work.

Passing the primitive this way:

<custom-directive ng-model="parentObj.variable"></custom-directive>