Call a function on parent controller that is declared in is child directive.
Parent controller HTML
<div ng-click="testFunction()"></div>
Parent controller js
$scope.testFunction = function(){
$scope.functionFromChildDirective()
}
Child directive js
function TestDirective() {
return {
restrict: 'EA',
scope: {
},
templateUrl: '',
controller: function($scope) {
"ngInject";
$scope.functionFromChildDirective = function(){
console.log("TEST")
}
}
}
}
export default {
name: 'testDirective',
fn: TestDirective
};
Just delete the empty scope deceleration, by defining it you are creating a new isolate scope. If you don't declare the scope in the directive definition object it will just inherit the parents scope. However with this approach the child directive can only be used once (i.e can't be repeated) as each instance of will just overwrite the $scope.functionFromChildDirective property.
Use the ng-ref directive to bind the controller to a parent variable:
<test-directive ng-ref="testAPI">
</test-directive>
function TestDirective() {
return {
restrict: 'EA',
scope: {
},
templateUrl: '',
controller: function() {
this.testFn = function(){
console.log("TEST")
}
}
}
}
To invoke it:
<div ng-click="testAPI.testFn()"></div>
The ngRef directive tells AngularJS to assign the controller of a component (or a directive) to the given property in the current scope.
For more information, see AngularJS ng-ref Directive API Reference.
Related
I've created a directive which I called my-tree, and I'm calling this directive from a view exemple-tree-view.html as following:
<my-tree ng-model="sampleTreeView.listNoeuds" ... />
this view's controller called sampleTreeView.
In my directive's link function I have a function that returns some data, which I affect to scope variable declared in the directive's controller, as following :
function linkFn(scope, element, attrs) {
//some code
scope.createNode = function ($event) {
var sel = $(element).jstree(true).create_node($($event.currentTarget)[0].closest('.jstree-node').id);
if (sel) {
$(element).jstree(true).edit(sel, '', function (node, success, cancelled) {
scope.treeActionsResult.createdNode = node;
});
}
};
//some code
}
My question is how can I get the scope.treeActionsResult.createdNode value in the sampleTreeView controller, since it's the controller for the exemple-tree-view.html where I call my directive.
You can use shared scope between the directive and controller by removing the scope property
like in this example:
MyApp.directive('studentDirective', function () {
return {
template: "{{student.name}} is {{student.age}} years old !!",
replace: true,
restrict: 'E',
controller: function ($scope) {
console.log($scope);
}
}
});
Still you have the $scope object, but in this case the scope object is shared with parent controller's scope.
You can read more about it fron the following link
Understanding Scope in AngularJs Custom Directive
If you don't create isolated scope for your directive then you can access directive scope values from your controller. like bellow
your controller and directive:
app.controller('MainCtrl', function($scope) {
$scope.value = 1;
});
app.directive('myTree', function() {
return {
restrict: 'AE',
link: function(scope, element, attrs) {
scope.values = {};
scope.values.price = 1234;
}
};
});
then use in your html like:
<body ng-controller="MainCtrl">
<p>value {{values.price}}</p>
<my-tree att="{{attValue}}"></my-tree>
</body>
here values.price shown from directive in MainCtrl
I'm trying to inherit an attribute from a parent custom directive with isolate scope. In the example below, I want to be able to access the api attribute on myParent from the myChild controller or link function. My end goal is to inject an instance of the api that can be accessed by the children and from the view controller.
<my-parent api="parentInstance1">
<my-child ng-repeat="field in ::data"
ng-attr-src="{{field.src||undefined}}"
</my-child>
</my-parent>
<my-parent api="parentInstance2">
<my-child ng-repeat="field in ::data"
ng-attr-src="{{field.src||undefined}}"
</my-child>
</my-parent>
A simplified version of both directives looks like this
app.directive('myParent', function () {
return {
transclude: true,
restrict: "E",
scope: {
api: '=?'
},
template: '...',
controller: function ($scope, $attrs ) {
// foo is injected from a factory instance
function foo ( ) {
}
$scope.api = {
foo: foo
}
},
link: function ($scope, $element, $attr) {
}
}
});
app.directive('myChild', function () {
return {
require: "^myParent",
restrict: "E",
scope: {
api: '=?'
},
template: "...",
controller: function ( $scope ) {
// I want to access $scope.api in link or controller
},
link: function ($scope, $element, $attr) {
// I want to access $scope.api in link or controller
}
}
});
I can't access $scope.api from the child directive but $scope.parentInstance1 and $scope.parentInstance2 are visible. I realise I can just explicitly declare but I'd rather understand how to do it correctly.
I dont know why you are referencing parentInstance1 and parentInstance2 on my-parent but the attributes on my-child are in myParent's $scope so you can reference the actual $scope.api object that is on myParent's $scope in the attributes of the my-child directive tag and then reference the name of the attribute in the isolate scope definition of the myChild directive.
<my-child inner-api="api"></my-child>
.. and then in the child directive...
app.directive('myChild', function () {
...
scope: {
innerApi: '=?'
}
...
controller: function($scope) {
$scope.innerApi // <- accessible in the controller
}
Heres a simplified fiddle...
I have two directives which both have an isolated scope. I would like to require the parent directive in my child directive, and then be able to watch if a scope variable of the parent changes. I don't want to modify the variable in the child, I just want to be able to read it.
I want to be able to add different children which both have access to the list, but I don't want to have to bind the list to every child. What is missing in the example below, is a way to watch the list which gets bound to the parent. I am able to pass the original list in, but as soon as it updates, the child will have an outdated model.
Parent directive:
angular
.module('app.parent', [])
.directive('parent', parent);
function parent() {
var directive = {
restrict: 'EA',
transclude: true,
template: '<div>parent <pre>{{vm.list}}</pre><ng-transclude></ng-transclude> </div>',
scope: true,
controller: ParentController,
controllerAs: 'vm',
bindToController: {
config: "=",
list: "="
}
};
return directive;
function ParentController() {
var vm = this;
}
}
child directive:
angular
.module('app.parent.child', ['app.parent'])
.directive('child', child);
function child() {
var directive = {
restrict: 'EA',
require: ['^^parent', '^child'],
template: '<div>child<pre>{{vm.list}}</pre></div>',
scope: true,
controller: ChildController,
link: linkFunc,
controllerAs: 'vm',
bindToController: {
config: "="
}
};
return directive;
function ChildController() {
var vm = this;
}
function linkFunc(scope, element, attrs, ctrls) {
var parentController = ctrls[0];
var vm = ctrls[1];
vm.list = parentController.list;
}
}
I have made a Plunkr with the code above. I am looking for a nice pattern to solve the issue I am having. Both directives will have their own unique config object passed in with configurations specific to the directive.
You can create a watcher on the child directive's scope object, but rather than watching a scope item, you can pass in a function as the first parameter to $watch() and simply return a value/object that you would like to watch.
So for instance inside your child directive's linkFunc()
scope.$watch(function() {
return parentController.list;
}, function(newList) {
vm.list = newList;
});
Modified your plunkr: http://plnkr.co/edit/6WzT8PQJRH1b5KuU0twn?p=preview
Using Angular I created a directive like this:
angular
.module('my-module', [])
.directive('myDirective', function () {
return {
restrict: 'E',
templateUrl: currentScriptPath.replace('.js', '.html'),
scope: {
scenarios: '='
},
controller: MyDirectiveController,
controllerAs: 'vm',
bindToController: true,
replace: true
}
});
MyDirectiveController:
MyDirectiveController.$inject = ['$scope'];
function MyDirectiveController($scope) {
var vm = this;
vm.scenarios = $scope.scenarios;
}
My directive HTML template is this:
<div>{{vm.scenarios[0].name}}</div>
In my parent view HTML I'm using the directive this way:
<my-directive scenarios="vm.scenarios"></my-directive>
The parent controller has a property:
vm.scenarios = [] // could be [{ name : "test"}]
As the vm.scenarios of the parent controller gets set after an $http call it is not available when the vm.scenarios of the directive controller is bound to the $scope.scenarios and it doesn't get updated when the parents controller vm.scenarios gets populated eventually.
When adding this to my directives controller, it works but the solution seems wrong to me:
$scope.$watch('scenarios', function(newValue) {
if (newValue !== undefined) {
vm.scenarios = $scope.scenarios;
}
});
This is how you should define your directive controller:
MyDirectiveController.$inject = [];
function MyDirectiveController() {
// nothing here
}
You don't need to use $scope because you already bind to controller instance this. It means that scope config
scope: {
scenarios: '='
},
populates controller instance this object, not $scope object, and hence $scope.scenarios is undefined. With vm.scenarios = $scope.scenarios; in controller you just overwrite correct binding with undefined value.
Demo: http://plnkr.co/edit/lYg15Xpb3CsbQGIb37ya?p=preview
I have nested directives, both creates new scopes. To preserve original content I decide to move child directive to compile function of parent directive. This move breaks connection between scopes, could someone explain me why? Thanks
jsfiddle: (remove template from parent directive to see the issue)
http://jsfiddle.net/luckylooke/uDkd3/9/
var myApp = angular.module('myApp', [])
.directive('parent', function directive() {
return {
compile: function(elm){
elm.append("</br> Appended <div child></div>");
},
template:"</br>From template <div child></div>",
scope: {},
controller: function ($scope) {
$scope.who = "parent";
$scope.message = "Text message";
//console.log($scope);
}
};
}).directive('child', function directive() {
return {
replace: true,
scope: {},
template: '<div class="child">child with {{$parent.message || "NO message!"}}</div>',
controller: function ($scope) {
$scope.who = "child";
//console.log($scope);
}
};
});
The Problem
As per this answer in Angularjs isolated scope for directives without own template:
[...] only elements in a template for the directive will be bound to
the isolated scope created by that directive. If you don't use a
template - content of the element, on which the directive is declared,
will bind as if isolated scope was not there.
Here is what your scope hierarchy looks like with a template:
... and here is what it looks like without one:
A Solution
Use transclusion to inject elements from your view into parent without using compile:
.directive('parent', function directive() {
return {
transclude: true,
template:"</br><div ng-transclude></div>From template <div child></div>",
scope: {},
controller: function ($scope) {
$scope.who = "parent";
$scope.message = "Text message";
}
};
})
Demo
Here the child directive is again an actual child of the parent directive. Notice too that the transcluded content appears in another scope which is a sibling of parent's isolate scope: