I am creating a small app and I have the following directive with the template.
smallgrid.directive.js:
angular.module('myActions')
.directive('smallgrid', ['$rootScope', function($rootScope) {
return {
restrict: "E",
scope: {
actionable: "="
},
controller: function($scope) {
$scope.setLocation = function() {
console.log("yee");
};
}
};
}])
.directive('three', function() {
return {
replace: true,
templateUrl: '/app/my_actions/directives/templates/grid3x3.template.html'
};
})
.directive('four', function() {
return {
replace: true,
templateUrl: '/app/my_actions/directives/templates/grid4x4.template.html'
};
})
.directive('five', function() {
return {
replace: true,
templateUrl: '/app/my_actions/directives/templates/grid5x5.template.html'
};
});
grid3x3.template.html
<div class="k-edit-field" id="board">
<div class="row" ng-click="setLocation()">
{{actionable.probability}}
</div>
</div>
I use this directive as follows:
<smallgrid three actionable="currentAction.actionable" ng-if="somecondition"></smallgrid>
The UI renders properly. However it shows {{actionable.probability}} is empty and the Click event is not firing. However, if I remove the isolated scope and access the variable directly, values are available. I understand that when I am using isolated scopes, in the three directive, I can't access values of smallgrid. Is there a way to pass those values from smallgrid to the template?
Passing a directive as an attribute of a directive you're bound to have scope problems.
It will look better if you use scope inheritance for nested directives with ng-transclude.
So your starting point should be
<smallgrid actionable="currentAction.actionable" ng-if="somecondition">
<three></three>
</smallgrid>
This way <three> has access to the $parent
function smallgrid() {
return {
restrict: "E",
transclude: true,
scope: {
actionable: "="
},
template: `<div ng-transclude></div>`,
controller: function($scope) {
$scope.setLocation = function() {
console.log("yee");
};
}
};
}
function three() {
return {
template: `<div class="k-edit-field" id="board">
<div class="row" ng-click="$parent.setLocation()">
test = {{$parent.actionable.probability}}
</div>
</div>`
};
}
function myController($scope) {
$scope.currentAction = {actionable: {probability: "test"}};
$scope.somecondition = true;
}
angular.module('myApp', []);
angular
.module('myApp')
.controller('myController', myController)
.directive('smallgrid', smallgrid)
.directive('three', three);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="myController">
<smallgrid actionable="currentAction.actionable" ng-if="somecondition">
<three></three>
</smallgrid>
</div>
</div>
Related
I want to call the function in child directive , instead of using the $scope.$broadcast to notify the child directive that something happens.
The outer directive will call the different functions in different child directive at different time.
You can use controllers in directive for this.
For example: in link function of child directive, you can save what you want in parent controller, and call then when you want.
Sample
angular.module('app', [])
.directive('parent', function() {
return {
controller: function() {
var parent = this;
parent.childs = [];
parent.click = function() {
parent.childs.forEach(function(child) {
child.addOne();
});
}
},
controllerAs: 'vm'
}
})
.directive('child', function() {
return {
require: ['child', '^parent'],
template: '<div>Child value: {{vm.val}} <input type="button" ng-click="vm.addOne()" value="add one" /></div>',
controller: function() {
var child = this;
child.addOne = function() {
child.val += 1;
}
},
controllerAs: 'vm',
scope: true,
link: function(scope, elem, attrs, ctrls) {
var childCtrl = ctrls[0],
parentCtrl = ctrls[1];
parentCtrl.childs.push(childCtrl);
childCtrl.val = +attrs.child;
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<div ng-app="app">
<div parent>
<input type="button" ng-click="vm.click()" value="add one to all" />
<div child="1"></div>
<div child="2"></div>
<div child="3"></div>
</div>
</div>
We will need to create an empty object in parent directive scope and pass it to the child directive as a parameter.
While receiving it in child directive – we can inject a method to it
app.directive('childDirective', function () {
return {
restrict: 'E',
scope: {
objectToInject: '=',
},
templateUrl: 'templates/myTemplate.html',
link: function ($scope, element, attrs) {
var killwatch = $scope.$watch('objectToInject', function (value) {
if(value){
$scope.Obj = value;
/*Injecting the Method*/
$scope.Obj.invoke = function(){
//Do something
}
killwatch();
}
});
}
};
});
And use the object to call the child directive function from parent.
How do i change the value of bar from directive2 so that it is reflected in directive1
If i make the scope:false it is happening.Is there any other way, to make this happen.(because in the code i am writting , i cannot make scope:false).
My basic requirement is to make one directive to talk to another.
Here you can try the plunkr version of the below code
HTML snippet
<body ng-controller="MainCtrl">
this is directive1: <div directive1></div>.<br/>
this is directive2: <div directive2></div>.
</body>
JS snippet
var app = angular.module('myApp', []);
app.directive('directive1', function() {
return {
restrict: 'A',
replace: true,
template: '<span>{{bar}}</span>'
}
});
app.directive('directive2', function() {
return {
restrict: 'A',
scope:{
},
replace: true,
link:function(s,e,a){
s.bar = "Changed value";
},
template: '<b>{{bar}}</b>'
}
});
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.bar ="original value";
});
You could simply use bar inside your isolate scope, that will do two way binding with your variable which is assigned to bar attribute, That means change inside a directive on bar variable will reflect the changes on controller scope variable.
Markup
<body ng-controller="MainCtrl">
this is directive1: <div directive1></div>.
<br />
this is directive2: <div directive2 bar="bar"></div>.
</body>
Directive
app.directive('directive2', function() {
return {
restrict: 'A',
scope:{
'bar': '=' //<-- Change here
},
replace: true,
link:function(s,e,a){
s.bar = "Changed value";
},
template: '<b>{{bar}}</b>'
}
});
Working Plunkr
I have modified your code in here
Share the variable in both directives by passing it as '=' in the scope, changing it in one directive will change it in the the other.
<body ng-controller="MainCtrl">
this is directive1: <div directive1 bar="bar"></div>.
<br />
this is directive2: <div directive2 bar="bar"></div>.
</body>
var app = angular.module('myApp', []);
app.directive('directive1', function() {
return {
restrict: 'A',
scope:{bar:'='},
replace: true,
template: '<span>{{bar}}</span>'
}
});
app.directive('directive2', function() {
return {
restrict: 'A',
scope:{bar:'='},
replace: true,
link:function(s,e,a){
s.bar = "Changed value";
},
template: '<b>{{bar}}</b>'
}
});
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.bar ="original value";
});
If they don't share the same $scope, the only way is using angularjs events.
In first directive you put:
$rootScope.$on('myEvent', function (event, data) {
$scope.bar = data.bar;
});
In the second one when bar change:
$scope.$emit('myEvent', {bar: bar});
Taking into account that are directives completely unrelated.
I'm trying to bind to ng-change on an element created by a directive up through two other directives that wrap it to a method on the controller using & bindings in an isolate scope, but I can't figure out how to get arguments to pass all the way through. Here's a plunk that demonstrates the problem.
In short, I have an HTML structure like this:
<body ng-app="ExampleApp">
<div ng-controller="Controller">
<button ng-click="doSomething('Called directly')">Call Function Directly</button>
<br />
<outer on-outer-model-changed="doSomething('Called from Outer in HTML')"></outer>
</div>
</body>
The controller:
var app = angular.module('ExampleApp', []);
app.controller('Controller', ['$scope',
function($scope) {
$scope.doSomething = function(one, two, three) {
console.log(arguments);
};
}
]);
The outer directive:
app.directive('outer', function($compile) {
return {
restrict: 'E',
scope: {
outerModelChanged: '&onOuterModelChanged'
},
link: function(scope, element, attrs) {
var innerElement = angular.element('<inner></inner>');
innerElement.attr('on-inner-model-changed', 'outerModelChanged(\'Called from Outer\')');
element.after(innerElement);
$compile(innerElement)(scope);
console.log(arguments);
}
}
});
And the inner directive that the outer directive creates:
app.directive('inner', function() {
return {
scope: {
innerModelChanged: '&onInnerModelChanged'
},
restrict: 'E',
template: '<button ng-click="innerModelChanged(\'Called from Inner\')">Call from Inner</button>'
}
});
I understand that I'm getting the output ["Called from Outer in HTML"] because this is hardcoded into the <outer> tag. What I don't understand is how to pass arguments all the way up from the inner directive.
I'm not sure I 100% get what you want to accomplish but this is how you would make the ["Called from Inner"] message appear.
Change the html so the on-outer-model-changed expression does not use a hardcoded string.
<body ng-app="ExampleApp">
<div ng-controller="Controller">
<button ng-click="doSomething('Called directly')">Call Function Directly</button>
<br />
<outer on-outer-model-changed="doSomething(outerParam)"></outer>
</div>
</body>
Then change the outer directive to call outerModelChanged with a parameter. And set the outerParam to the innerParam.
app.directive('outer', function($compile) {
return {
restrict: 'E',
scope: {
outerModelChanged: '&onOuterModelChanged'
},
link: function(scope, element, attrs, controller) {
var innerElement = angular.element('<inner></inner>');
innerElement.attr('on-inner-model-changed', 'outerModelChanged({outerParam:innerParam})');
element.after(innerElement);
$compile(innerElement)(scope);
console.log(arguments);
}
}
});
Finally call the innerModelChanged from the inner directive with the innerParam set to your message.
app.directive('inner', function() {
return {
scope: {
innerModelChanged: '&onInnerModelChanged'
},
restrict: 'E',
template: '<button ng-click="innerModelChanged({innerParam:\'Called from Inner\'})">Call from Inner</button>'
}
});
Here is a plunk to the above code.
I'm attempting to dynamically render directives based on a configuration array of directive names. Is this possible in angular? I also want these rendered directives to live within a single parent dom element rather than each getting a new wrapper (as you would with ng-repeat)
http://jsfiddle.net/7Waxv/
var myApp = angular.module('myApp', []);
myApp.directive('one', function() {
return {
restrict: 'A',
template: '<div>Directive one</div>'
}
});
myApp.directive('two', function() {
return {
restrict: 'A',
template: '<div>Directive two</div>'
}
});
function MyCtrl($scope) {
$scope.directives = ['one', 'two'];
}
<div ng-controller="MyCtrl">
<div ng-repeat="directive in directives">
<div {{directive}}></div>
</div>
</div>
EDIT:
Since posting this, I've also tried:
.directive('parentDirective', function () {
return {
restrict: 'A',
replace: true,
link: function (scope, element) {
scope.directives = ['one', 'two'];
for (var i = 0; i < scope.directives.length; i++) {
element.prepend('<div ' + scope.directives[i] + '></div>')
}
}
};
});
<div parent-directive></div>
With this, the templates from the prepended directives are not rendered.
Here what I came up with (took a long time)... The solution is pretty versatile though, you can modify $scope.directives array at will and the directives will be fabricated dynamically. You can also point to any particular property in the current scope to retrieve the directive list from.
Demo link
app.js
var myApp = angular.module('myApp', []);
myApp.directive('one', function() {
return {
restrict: 'E',
replace: true,
template: '<div>Directive one</div>'
}
});
myApp.directive('two', function() {
return {
restrict: 'E',
replace: true,
template: '<div>Directive two</div>'
}
});
myApp.directive('dynamic', function ($compile, $parse) {
return {
restrict: 'A',
replace: true,
link: function (scope, element, attr) {
attr.$observe('dynamic', function(val) {
element.html('');
var directives = $parse(val)(scope);
angular.forEach(directives, function(directive) {
element.append($compile(directive)(scope));
});
});
}
};
});
function MyCtrl($scope) {
$scope.directives = ['<one/>', '<two/>'];
$scope.add = function(directive) {
$scope.directives.push(directive);
}
}
index.html
<div ng-controller="MyCtrl">
<div dynamic="{{directives}}"></div>
<button ng-click="add('<one/>')">Add One</button>
<button ng-click="add('<two/>')">Add One</button>
</div>
So the second attempt would have worked had I used $compile on the prepended directives like so:
.directive('parentDirective', function($compile)
....
element.prepend($compile('<div ' + scope.directives[i] + '"></div>')(scope));
I have the following directives:
Directive 1
app.directive('tableDiv', function () {
return {
templateUrl: 'js/directives/table-div/table-div.html',
replace: true,
scope: {
table: '=',
},
controller: function ($scope, $element, $attrs) {
},
link: function postLink(scope, element, attrs) {
}
}
});
Directive 1 template:
<div data-table-div-row value="row" sizes="table.tbody.sizes" ng-repeat="row in table.tbody.values">
</div>
Directive 2:
app.directive('tableDivRow', function ($rootScope) {
return {
templateUrl: 'js/directives/table-div/table-div-row.html',
replace: true,
scope: {value: '=', sizes: '='},
controller: function ($scope, $element, $attrs) {
$scope.showInfo = function () {
$scope.visible = true;
};
$scope.hideInfo = function () {
$scope.visible = false;
};
$scope.hasTemplate = function() {
return ($scope.value.template ? true : false);
}
},
link: function postLink(scope, element, attrs) {
scope.$watch(function () {
return scope.visible;
}, function (value) {
if (value === true) {
$(element).find('div.table-row').addClass('open');
$(element).find('div.table-row.edit').removeClass('hidden');
} else {
$(element).find('div.table-row').removeClass('open');
$(element).find('div.table-row.edit').addClass('hidden');
}
}, true);
}
}
});
Directive 2 template:
<div>
<div class="row-fluid">
<div class="table-row clearfix">
<div class="{{sizes.first}} first">{{value.display.first}}</div>
<div ng-repeat="cell in value.display.cells" class="{{sizes.cells[$index]}}">{{cell}}</div>
<div class="{{sizes.last}} last regular">
<div ng-switch on="value.display.last">
<div ng-switch-when="%editbutton%">
<div class="show-info closed" ng-click="showInfo()"></div>
</div>
<div ng-switch-default>
{{value.display.last}}
</div>
</div>
</div>
</div>
</div>
<div ng-if="hasTemplate()">
<ng-include src="value.template"></ng-include>
</div>
Inside the second directive template I'm including a dynamic template based on the controller $scope model. Inside that template and in the directive template I want to call a function from the controller $scope. Is there a way to achieve that?
A child scope is created for <ng-include src="value.template"></ng-include>, which means that the parent functions should be available in this template. In other words, you shouldnt have to do anything and it'll work - see this simple example: http://plnkr.co/edit/Es2UL09ASPSTa5Fstzjf?p=preview
So, it seems it's in the docs and it wasn't clear enough for me. Inside the directive declaration I needed to add: method: '&'
scope: {
table: '=',
method: '&'
},
and inside the template where I call the directive, the method html attribute MUST HAVE () at the end:
<div data-table-div-row method="method()" value="row" sizes="table.tbody.sizes" ng-repeat="row in table.tbody.values"></div>
In this way the method can be passed down to the second directive.
As #Direvius propose, to call a method in the controller scope from a directive you must call the method passing an object with the parameter rather the parameter itself :
scope.method({message : "text"});
So, to call a controller method from the nested directive you must to wrap the parameter inside n objects :
scope.method({message : {message : "text"}});
Don't forget to declare "message" as argument in the nested directive template and the outer-directive declaration in your html :
<outer-directive outer-method-arg="method(message)"></outer-directive>
also in your outer template :
<inner-directive inner-method-arg="method(message)"></inner-directive>