How can parent controller scope variables be updated from a transcluded directive scope's function?
I have a situation where I am including directives within another directive using transclusion. Here is an example of how it is set up:
<my-table>
<my-getter-button></my-getter-button>
</my-table>
The code for the "my-table" and "my-getter-button" directives are as follows:
my-table template:
<table>
<tr ng-repeat="item in items">
<td data-id="{{item.Id}}" ng-transclude></td>
</tr>
</table>
my-table directive:
.directive('myTable', function () {
return {
transclude: true,
restrict: 'E',
templateUrl: 'views/mytable.html',
scope: false
};
});
my-getter-button directive (with template):
app.directive('myGetterButton', function () {
function link(scope, element) {
scope.finalizeGet = function () {
var id = element.parent().data('id');
scope.clear();
scope.get(id)
.success(function (data) {
// The following line was intended to update the variables within the parent controller:
scope.$parent.instance = data;
angular.element('#detailsModal').modal('show');
})
.error(function (data) {
scope.errors = data;
});
};
};
return {
restrict: 'E',
template: '<button class="btn btn-info" ng-click="finalizeGet()">' +
'<span class="glyphicon glyphicon-book"></span>' +
'</button>',
scope: false,
link: link
};
});
I expected scope.$parent.instance = data; to modify the parent controller's scope.instance, but it did not.