Recently, I encountered a similar situation and devised a solution to handle it efficiently.
To transmit data and process it in a directive from a controller, follow these steps.
Start by creating a controller in the main page and specifying an array according to your requirements...
app.controller("ctrl", function($scope) {
$scope.scope = $scope; //this ensures the current scope is transferred to the directive
$scope.array = [{
"a": "vfdxvf",
"b": "sdc"
}, {
"a": "vfdxvf",
"b": "sdc"
}, {
"a": "vfdxvf",
"b": "sdc"
}, {
"a": "vfdxvf",
"b": "sdc"
}];
});
In the above code, $scope.scope = $scope is used to establish a reference to the controller scope.
Next, define the directive as shown below. It will bind all the necessary values, and any modification to the array will be reflected on both ends.
Consider the following sample code..
app.directive("someDirective", function() {
return {
restrict: "EA",
scope {
array: "=", // enables two-way binding of the array
scope: '=' // retrieves the scope of the originating controller
},
templateUrl: "./templates/test.html",
controller: function($scope) {
$scope.newArray = $scope.scope.array;
//perform necessary operations with the array...
}
}
});
Finally, for the main HTML page, include the directive like this..
<some-directive scope="scope" array="array"></some-directive>