Problem using a directive inside a cell template

[kaerfredoc]

If you use the grid's built-in search filter and type in the number 2, you will see that the row.entity from the grid model is not in sync with the directive model's output.

http://plnkr.co/edit/N1yxj6U6Or0ttnsLfHLB

Related to this issue? #527

[wattsbn]

In your example, you have the model property on the directive setup with a two-way binding ('='), but you are not watching for changes. When you filter the rows using the grid's search box, the model property changes but the data object that you created in the link function of the directive does not get updated.

To fix this, you can either not use the data object in the directive or use setup a $watch on 'model' to update the datat object.

link: function (scope, element, attrs) {
    scope.data = {id:null};
    scope.data.id = scope.model.id;
    scope.$watch('model', function() {
      scope.data.id = scope.model.id;
    });
}

[kaerfredoc]

Thanks for the info!

I'm still confused why you need to watch the model if there's 2-way binding? Originally I did not have the data object but had the same problem. I've updated the plunker to demonstrate.

[wattsbn]

With the updated version of your plunk, you are storing off the id of the model.

scope.id = scope.model.id;

This is a one time assignment not a binding to scope.model.id.
In your example, scope.model is the only object that has a binding.
So, when the model object changes, the value at scope.model.id will also change, but scope.id is still pointing at the old value.

You can either use the watch that you have commented out or use the following as your template.

<span>{{ model.id }}</span>

Using this template accesses the id off the model object which has the binding, so when the model changes, the UI will reflect the changes.

[kaerfredoc]

Awesome explanation. Looks like I was over-complicating things. Thanks!