AngularJS: access directive data from controller - angularjs

Question

Lets assume I have a AngularJS directive looking like this:
app.directive('psDIR', [
function() {
return {
template: "<div style='padding: 5px; border: 1px solid red; margin-bottom: 10px;'><p>This is a direcive:</p> <textarea rows='5' cols='50' ng-model='md'></textarea></div>",
restrict: 'AEC',
scope: {}
}
}
]);
I am using this directive number of times on a single page. How do I get a value of every directive instance/scope of the ng-model="md" in my MainCtrl (i.e. I want to save this value in the add()) :
app.controller('MainCtrl', ['$scope',
function($scope) {
console.log("init");
$scope.add = function() {
console.log($scope);
}
}
]);
Plunker demo: http://embed.plnkr.co/Q5bw6CBxPYeNe7q6vPsk/preview
Any suggestions much appreciated.

Answer 1

Since you are creating isolated scope and otherwise too you cannot access the child scope from parent scope.
The way out it to pass the model as parameter from parent like
<div class="psDIR" model='field2'></div>
<div class="psDIR" model='field1'></div>
Then in the directive update them with attribute binding. See update plunkr
http://plnkr.co/edit/GKZHSDe5J0eCzqlgaf4g?p=preview

Answer 2

Usually the right thing to do when you want to communicate between scopes (i.e. directives and other controllers) is to use a service.
You can take a look at a simple plunker here: http://plnkr.co/edit/8Al31Bq9BfoazUCpqhWy?p=preview
The psDirs service keeps a registry of the directives:
app.service('psDirs', function() {
var psDirs = {
dirs: [],
register: function (dir) {
psDirs.dirs.push(dir);
}
};
return psDirs;
});
And the directives register themselves and update the value when they change:
link: function (scope, elm, attr) {
var dir = { val: "" };
psDirs.register(dir);
scope.$watch('md', function (n, o) {
if (n !== o) {
dir.val = n;
}
});
}
Then your controller can inject the psDirs service and access the directive registry as needed. This prevents brittle scope relationships, and allows the the directive registry service to be used elsewhere, in multiple controllers and sections of your application.

Answer 3

A possible solution is with require:
app.directive('psDIR', [
function() {
return {
...,
require: "ngController",
link: function(scope, elem, attrs, ngCtrl) {
ngCtrl.hook(scope);
}
}
}
]);
And the necessary change to the controller:
app.controller('MainCtrl', ['$scope',
function($scope) {
console.log("init");
$scope.add = function() {
var i;
for( i=0; i < psDirs.length; i++ ) {
console.log(i + " -> " + psDirs[i].md);
}
}
var psDirs = [];
this.hook = function(scope) {
psDirs.push(scope);
};
}
]);
Try it out here: http://plnkr.co/edit/zCZ1TOm3aK8V4piCAY6u?p=preview
If you do decide to go with this solution, I'd suggest implementing the "wrapper" controller in a specialized wrapper directive, so as to avoid situations where ng-controller may be set in some other element in the hierarchy. In this case, just require: "wrapperDirective".
EDIT: The HTML for the wrapper directive case would simply look like:
<div wrapper-directive>
<div class="psDIR"></div>
<div class="psDIR"></div>
<button ng-click="add()">Add</button>
</div>
And the directive itself uses the code of the previous ng-controller:
app.directive('wrapperDirective', function() {
return {
restrict: "A",
// YOU MAY WANT ISOLATED SCOPE, JUST ADD scope: {},
controller: ["$scope", function($scope) {
// SAME CODE AS BEFORE
console.log("init");
$scope.add = function() {
var i;
for( i=0; i < psDirs.length; i++ ) {
console.log(i + " -> " + psDirs[i].md);
}
}
var psDirs = [];
this.hook = function(scope) {
psDirs.push(scope);
};
}]
};
});
And of course change the require configuration:
app.directive('psDIR', [
...
require: "^wrapperDirective",
link: function(scope, elem, attrs, wrapperDirectiveCtrl) {
wrapperDirectiveCtrl.hook(scope);
}