Reputation: 338
I have my ngGrid in a partial page, and I'm trying to access the selected items on the main page, I assume the best way to get this done is with $emit(to parent scope) and $on (to catch the event). For some reason my afterSelectionChange doesn't appear to be firing and I'm wondering if I'm just doing something wrong. Or if there's a better way to track changes to a child grid selection even.
I have
{{mySelectedItems}}On my partial, and it updates just fine. But also have
{{selectedDevices}}On my main view, and it's never getting updated. A breakpoint on the function within the "afterSelectionChange" also is not getting hit. here's the gridoptions. zz is just my previously defined data, not really relevant, also chopped out my columnDefs to minimize space.
$scope.mySelectedItems = [];
$scope.gridItems = @Html.Raw(Json.Encode(zz))
$scope.gridOptions = {
selectedItems:$scope.mySelectedItems,
afterSelectionChange: function (data) {
$scope.$emit("selectionChanged", $scope.mySelectedItems)},
multiSelect:true,
data: 'gridItems',
enableColumnResize: true
};
And finally on my main View, I have
$scope.$on("selectionChanged",function(event,data){
$scope.selectedDevices=data;
})
to catch the changes.
Upvotes: 0
Views: 1408
Reputation: 338
Ok so apparently you're not able to set a breakpoint where I was trying, I added a debugger line and it successfully broke in the afterselectionchange. It was the emit that was not actually working correctly. but once I was able to successfully get into debug, i was able to trace the problem down to a scope issue. I was catching the event in the wrong parent scope. It was a bit confusing for me at first because we are using razor @sections so the partial view was not being included in the same parent scope, it was parenting to the layout page. I moved my ng-controller to a div surrounding the partial in that section and that solved it.
The lesson here... watch your scopes.
Upvotes: 1