Angular 1.5.7 directive two way binding of null object

Question

I have an iscolated scope directive that shares scope with '='. We need to pass an object to the directive. When the object is passed to the directive with it's properties, the directive Works fine and the object, after beeing modified in the directive, is returned correctly to the calling view.

However, when the calling view passes the same object declared as null, even after modifying the object in the directive, the object is returned as null.

The relevant parts of the directive are shown below:

.directive("lookupCentrosDeGestion", function () {
    var _controller = ['centrosDeGestionServices', 'toastr', function (centrosDeGestionServices, toastr) {
        var dvm = this;

        ...

        dvm.rowSelected = function (item) {
            if (!dvm.centroDeGestion)
                dvm.centroDeGestion = {};
            dvm.centroDeGestion.crecodigo = angular.copy(item.crecodigo);
            dvm.centroDeGestion.crenombre = angular.copy(item.crenombre);
            dvm.centroDeGestion.divcodigo = angular.copy(item.divcodigo);
            dvm.centroDeGestion.empRazonSocial = angular.copy(item.empRazonSocial);
            dvm.centroDeGestion.empid = angular.copy(item.empid);
            dvm.centroDeGestion.prynombre = angular.copy(item.prynombre);
            dvm.centroDeGestion.prynumero = angular.copy(item.prynumero);
            dvm.centroDeGestion.unicodigo = angular.copy(item.unicodigo);
            dvm.showMainParent();
        }

        dvm.showMainParent = function () {
            dvm.view.active = dvm.view.returnTo;
        }

    }];

    return {
        restrict: 'E',
        scope: {
            view: '=',
            centroDeGestion: '=',
            centroDeProcesoId: '=',
            centroDeProcesoName: '=',
        },
        link: _link,
        controller: _controller,
        controllerAs: 'dvm',
        bindToController: true,
        templateUrl: '/hr/admin/centrosDeGestion/lookupCentrosDeGestion.html'
    };



})

If a null object is passed to the directive (dvm.centroDeGestion), I creaste a new object and then assign it's properties, however the calling view still receives null.

I would also like to assign the object directly, instead of having to assign each property, but the line dvm.centroDeGestion = angular.copy(ítem) will always return null.

Any ideas on how to resolve these issues?

Thanks in advance

Won't using @ cause the directive to treat the object as a string? I did try anyways, but with no luck. — aplon, Aug 29 '16 at 17:33
One way is to bind an empty object to directive's centroDeGestion property in case that model is null instead of initializing it to an empty object inside directive. — Developer, Aug 29 '16 at 17:45

plong0 · Accepted Answer · 2016-08-29T19:01:06.787

Notes about data-binding in general

You can only bind to a variable. Think about it in terms that you are binding to a location in memory. It is very similar to pointers in C++.

In this case, if you are trying to bind null, you are not pointing to any memory so there is no binding.

Please note that with bindings, if you re-assign the variable, you will break the binding because the caller does not know about the new variable. If you only modify the variable's properties, the caller will still have reference to it and binding will work.

To illustrate, consider this code:

var a = {};
var b = a; // aka data-binding

b.foo = 'bar'; // a.foo == 'bar' (because b === a)

b = {}; // b !== a (whoops! broken binding!)
b.baz = 'biz'; // a.baz == undefined

Looking at your implementation...

Let's say you are using this directive like so: <lookup-centros-de-gestion centro-de-gestion="foo">

An easy solution would be to have the caller initialize $scope.foo = {}; and remove the dvm.centroDeGestion={}; from the rowSelected function (because reassigning the "root" variable breaks binding! -- as in the caller still has its $scope.foo object, but it is not the same memory as the newly allocated dvm.centroDeGestion).

Another solution would be to bind to an object and set a certain property on it. ex: dvm.centroDeGestion.data={};, then to access its properties in your caller, you would use foo.data.*

Hopefully this explanation makes sense. I will try to clarify if you have any questions about it.

Thank you very much for your clear explanation. So bottom line, do not pass a null object to a directive and expect to return an object with properties. Any ideas on why the object assignment does not work and I have to assign property by property? — aplon, Aug 29 '16 at 17:56
It is like I said: if you re-assign a data-bound variable, it breaks binding because the caller does not know about the newly created variable. Bottom line is never re-assign a data-bound variable in the directive it is bound in. I pretty much always copy each property into the object if I need to. This is very easy using: `for (var prop in src) { dest[prop] = src[prop]; }` — plong0, Aug 29 '16 at 18:07

Angular 1.5.7 directive two way binding of null object

1 Answers1