Develop Reference

Creating reusable component in Angularjs 1.5.x which can access parent controller fields

I am trying to create a reusable component which can be reused accross the application. We are using Angular 1.5.8
There is some data that needs to be passed from the parent component to child component. (Typically an object holding information). It can be
After some reading i found out there is attribute called require where you can mention the name of the parent component and then can access the methods of parent controller.
The main drawback is the parent component name is hardcoded. And that limits the reusability of the component.
Is there anyway where we can pass data from parent component to child in dynamic way.
Code sample
app.component('parent',
{ restrict: 'E',
scope: {},
templateUrl: 'app/parent.html',
controller: function(){
var vm = this;
vm.sayHello = function (){
return {
parentName : 'parent1',
parentCode : 'parentCode1'
};
};
},
controllerAs: 'vm'});
app.component('child', {
require: {
parentCtrl: '^^parent'
},
controller: function() {
var self = this;
this.$onInit = function() {
self.parentCtrl.sayHello();
};
}
});
Thanks

add bindings to child component in the definition object:
app.component('child',{
bindings:{
data: '<'
},
templateUrl: 'app/child.html',
controller: childController});
then in parent.html you use the following:
Plunkr here : https://plnkr.co/edit/d6wS1dHVsYT3fNkMUVNY?p=preview
angular.noop is just an empty function so you can put if you do not have any controller for the component
$ctrl is default if you do not specify controllerAs alias name
Also you can use on child component $onInit() $onChanges() and $onDestroy() lifecycle hooks to control what the component will do at certain points.
If you use .component drop the restrict: 'E' is already an element

How to pass an object from a nested directive with isolated scope to parent controller scope in angular

I have a directive treeview which contains a nested directive (being the branches) of each item rendered.
In the scope of both directives I have declared two parameters that should be talking to the parent controller.
filter: '&' //binds the method filter within the nested directive (branch) to the method doSomething() in the tree directive attribute which is bound to the html directive that binds to the controller.
iobj: '=' is the two way binding paramter that should be passing the scoped object to the controller. (but currently isn't)
Directive:
app.directive('tree', function () {
return {
restrict: 'E',
replace: true,
scope: {
t: '=src',
filter: '&',
iobj: '='
},
controller: 'treeController',
template: '<ul><branch ng-repeat="c in t.children" iobj="object" src="c" filter="doSomething()"></branch></ul>'
};
});
app.directive('branch', function($compile) {
return {
restrict: 'E',
replace: true,
scope: {
b: '=src',
filter: '&',
iobj: '='
},
template: '<li><input type="checkbox" ng-click="innerCall()" ng-hide="visible" /><a>{{ b.name }}</a></li>',
link: function (scope, element, attrs) {
var has_children = angular.isArray(scope.b.children);
scope.visible = has_children;
if (has_children) {
element.append('<tree src="b"></tree>');
$compile(element.contents())(scope);
}
element.on('click', function(event) {
event.stopPropagation();
if (has_children) {
element.toggleClass('collapsed');
}
});
scope.innerCall = function () {
scope.iobj = scope.b;
console.log(scope.iobj);
scope.filter();
}
}
};
});
HTML:
<div ng-controller="treeController">
<tree src="myList" iobj="object" filter="doSomething()"></tree>
<a ng-click="clicked()"> link</a>
</div>
Controller:
app.controller("treeController", ['$scope', function($scope) {
var vm = this;
$scope.object = {};
$scope.doSomething = function () {
var item = $scope.object;
//alert('call from directive');
console.log(item);
}
$scope.clicked = function () {
alert('clicked');
}
...
Currently I can invoke the function $scope.doSomething from the directive to the controller. So I know that I have access to the controllers scope from the directive. What I cannot figure out is how to pass an object as a parameter from the directive back to the controller. When I run this code, $scope.object
is always an empty object.
I'd appreciate any help or suggestions on how to go about this.

The & directive binding supports parameter passing. Given your example
scope.filter({message: 'Hello', anotherMessage: 'Good'})
The message and anotherMessage become local variables in the expression bound to directive:
<tree src="myList" iobj="object" filter="doSomething(anotherMessage, message)"></tree>
Here's a sample plunker where the callback parameters are set inside a template.
The documentation clearly states that:
Often it's desirable to pass data from the isolated scope via an
expression to the parent scope, this can be done by passing a map of
local variable names and values into the expression wrapper fn. For
example, if the expression is increment(amount) then we can specify
the amount value by calling the localFn as localFn({amount: 22}).

Pass directive attribute into linked controller?

I have a directive i'm using to do the same search filtering across multiple pages. So the directive will be using a service and get pretty hefty with code. Because of that I want to link to a controller instead of have the controller inside the directive like this:
.directive('searchDirective', function($rootScope) {
return {
restrict: 'E',
templateUrl:'searchtemplate.html',
controller: 'searchCtrl',
controllerAs: 'search'
};
});
I also want access to parent scope data inside the template, so I don't want to use a isolated scope.
Anyway here's what i'm not sure how to do. My directive looks like this:
<search-directive filter="foo"/>
How do I pass in the value in the filter attribute so that I can access it in my controller using $scope.filter or this.filter?
If I were using an isolated scope it'd be simple. If i had the controller in the same page I could use $attrs. But since i'm using a controller from another spot and don't want an isolated scope i'm not sure how to get the attrs values into the controller.
Any suggestions?

What about using the link function and passing the value to the scope?
return {
restrict: 'E',
templateUrl:'searchtemplate.html',
controller: 'searchCtrl',
controllerAs: 'search',
link: function (scope, element, attr) {
scope.filter = attr.filter;
}
};

searchDirective.js
angular
.module('searchDirective', []).controller('SearchCtrl', SearchCtrl)
.directive('SearchDirective', directive);
function directive () {
var directive = {
templateUrl:'searchtemplate.html',
restrict: "E",
replace: true,
bindToController: true,
controller: 'searchCtrl as search',
link: link,
scope: { filter:'=' } // <-- like so here
};
return directive;
function link(scope, element, attrs) {}
}
SearchCtrl.$inject = [
'$scope',
'$filter'];
function SearchCtrl(
$scope,
$filter) {
/** Init SearchCtrl scope */
/** ----------------------------------------------------------------- */
var vs = $scope;
// ....
Also I highly recommend checking out this AngularJS style guide, how you are writing your directive above is how I use to do it too. John Papa shows some way better ways: https://github.com/johnpapa/angular-styleguide
Directives:
https://github.com/johnpapa/angular-styleguide#directives
Controllers:
https://github.com/johnpapa/angular-styleguide#controllers

Flip the values of bindToController and scope around.
{
....
scope: true,
bindToController: { filter:'=' }
...
}
I have just hit the same issue over the weekend, and made a simple complete example here: bindToController Not Working? Here’s the right way to use it! (Angular 1.4+)

AngularJS : How to update controller scope associated to directive scope's object as it changes?

Here's the explanation:
I have the current controller that creates an array of $scope.plan.steps which will be used to store every step:
.controller('PlanCtrl', function ($scope, $http) {
$scope.plan = {
steps: [{}]
};
$scope.addStep = function () {
$scope.tutorial.steps.push({});
}
}
Then I have the following directive which has an isolated scope and that is associated to the index of the $scope.plan.steps array:
.directive('planStep', function () {
return {
template: '<input type="text" ng-model="step.name" />{{step}}',
restrict: 'E',
scope: {
index: '=index'
},
transclude: true,
controller: function($scope, $element, $transclude) {
$scope.removeStep = function() {
$scope.$emit('removeStep', $scope.index);
$element.remove();
$scope.$destroy();
}
}
};
});
These two communicate, create, and delete objects inside of the controller's scope, however, how can I allow the directive to update the controller's scope array in real time?
I've tried doing a $watch on the directive's isolated scope changes, $emit the changes to the controller, and specify the $index... But no luck.
I've created a plunker to reproduce what I currently have: Link
So far I can create and delete objects inside of the array, but I cannot get a single object to update the controller's object based on the $index.
If the explanation was not clear, by all means, let me know and I will elaborate.
Thank you

WHen you do things like this inside ng-repeat you can take advantage of the child scope that ng-repeat creates and work without isolated scope.
Here's the same directive without needing any angular events
.directive('planStep', function() {
return {
template: '<button ng-click="removeStep(step)">Delete step</button><br><input type="text" ng-model="step.name" />{{step}}<br><br>',
restrict: 'E',
transclude: true,
controller: function($scope, $element, $transclude) {
var steps = $scope.plan.steps// in scope from main controller
/* can do the splicing here if we want*/
$scope.removeStep = function(step) {
var idx =steps.indexOf(step)
steps.splice(idx, 1);
}
}
};
});
Also note that removing the element with element.remove() is redundant since it will automatically be removed by angular when array gets spliced
As for the update, it will update the item in real time
DEMO

The way you set up 2-way binding for index you could set one up for step as well? And you really do not need index to remove the item, eventhough your directive is isolated it relies on the index from ng-repeat which probably is not a good idea.
<plan-step ng-repeat="step in plan.steps" index="$index" step="step"></plan-step>
and in your directive:
scope: {
index: '=index',
step:'='
},
Demo
Removing $index dependency and redundant element remove() and scope destroy (when the item is removed from the array angular will manage it by itself):
return {
template: '<button ng-click="removeStep()">Delete step</button><br><input type="text" ng-model="step.name" />{{step}}<br><br>',
restrict: 'E',
scope: {
step:'='
},
transclude: true,
controller: function($scope, $element, $transclude) {
$scope.removeStep = function() {
$scope.$emit('removeStep', $scope.step);
}
}
and in your controller:
$scope.$on('removeStep', function(event, data) {
var steps = $scope.plan.steps;
steps.splice(steps.indexOf(data), 1);
});
Demo
If you want to get rid of $emit you could even expose an api with the isolated scoped directive with function binding (&).
return {
template: '<button ng-click="onDelete({step:step})">Delete step</button><br><input type="text" ng-model="step.name" />{{step}}<br><br>',
restrict: 'E',
scope: {
step:'=',
onDelete:'&' //Set up function binding
},
transclude: true
};
and register it on the view:
<plan-step ng-repeat="step in plan.steps" step="step" on-delete="removeStep(step)"></plan-step>
Demo

Is it possible to call functions from parent directive controller, when subsidiary directive has isolated scope

Here is the jsfiddle.net exemplifying my situation.
app=angular.module("app",[]);
app.directive("submitForm",function(){
return{
scope:{},
restrict: 'A',
controller:function($scope, $element){
$scope.submitted=false;
this.submit=function(){
$scope.submitted=true;
};
this.getSubmit=function(){
return $scope.submitted;
};
this.submitOn=function(){
return $scope.$broadcast("submitOn");
};
},
link: function(scope, element, attrs,ctrl){
element.find("button").on("click",function(){
scope.submitted=true;
ctrl.submitOn();
});
}
}
})
.directive('errorRender',function(){
return{
restrict: 'A',
//scope: {},
require:['ngModel','^submitForm'],
controller: function($scope, $element){
$scope.$broadcast("requireErrorEnable");
$scope.$broadcast("requireErrorDisable");
$scope.$broadcast("maxlengthErrorEnable");
$scope.$broadcast("maxlengthErrorDisable");
},
compile: function compile(tElement, tAttrs) {
return function postLink(scope, element, attrs, ctrl) {
modelCtrl=ctrl[0];
formCtrl=ctrl[1];
scope.$on("submitOn",function(){
alert("submitOn!!!");
});
scope.$on("requireErrorEnable",function(){
element.attr("placeholder","error");
});
scope.$on("requireErrorDisable",function(){
element.attr("placeholder","");
});
scope.$watch(function(scope){
return ctrl[0].$error.required;
},
function(newValue, oldValue, scope){
if(ctrl[0].$error.required){
if((ctrl[0].$dirty && !ctrl[0].$viewValue)){
scope.$emit("requireErrorEnable");
}
}else{
scope.$emit("requireErrorDisable");
}
});
}
}
}
});
If I use the directive errorRender in an isolated scope, I can't fire the function submitForm of the directive's controller in this case. Otherwise all directives errorRender fire at the same time (as we can expect).

directives can share controllers via the require property, that you correctly specified. this is what Angular's docs on directives say about accessing the directive's controller (emphasis added):
"require - Require another directive and inject its controller as the fourth argument to the linking function. The require takes a string name (or array of strings) of the directive(s) to pass in. If an array is used, the injected argument will be an array in corresponding order. If no such directive can be found, or if the directive does not have a controller, then an error is raised"
IMHO, when applied to your case, this means that the link function where the controller is injected is the one in your child directive, not in the parent