I am currently working with a directive in a JavaScript grid library called Slickgrid.
http://plnkr.co/edit/KWZ9i767ycz49hZZGswB?p=preview
My goal is to pass the selected row back up to the controller. To achieve this, I want to implement isolated scope (using the '=') to enable two-way binding between the controller and directive.
Everything works fine when I define the directive without any scope declaration:
<slickgrid id="myGrid" data="names" selected-item="selectedItem"></slickgrid>
app.directive('slickgrid', function() {
return {
restrict: 'E',
replace: true,
//scope: {
// selectedItem: '='
//},
template: '<div></div>',
link: function($scope, element, attrs) {
...
var redraw = function(newScopeData) {
grid.setData(newScopeData);
grid.render();
};
$scope.$watch(attrs.data, redraw, true);
However, when I uncomment lines 19-21 in app.js to define the scope, it seems like the $scope.$watch function, which is watching the attrs.data object, is calling redraw but passing in undefined as the value of attrs.data.
My understanding might be incorrect, but I'm unsure why defining the scope would lead to this issue. Can someone shed light on why this could be happening?
.nathan.