Using & bindings in nested AngularJS directives - javascript

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.

Related

How do I pass any array from ng-repeat to AngularJs attribute directive?

I have a list of hierarchy of menu items where each item has a child list. For The menuItems property is from the controller scope(list of parents). I want to pass an array to be consumed by the directive on both levels of the following example.
Html Code
<div sortable="menuItems">
<div ng-repeat="item in menuItems">
...
<div sortable="item.Children">
<div ng-repeat="child in menuItems.Children">...</div>
</div>
</div>
</div>
Directive code
app.directive('sortable', function ($timeout) {
return {
restrict: 'A',
link: function($scope, $elem, attrs) {
// I need access by the array in here.
}
};
});
I have set the sortable attribute to the value of the name of the list which obviously is not working for me.
You can set up a scope watch (or collection watch), since the value of the attribute is the scope expression.
app.directive('sortable', function ($timeout) {
return {
restrict: 'A',
link: function($scope, $elem, attrs) {
$scope.$watchCollection(attrs.sortable, function (newCollection, oldCollection) {
// (do something with newCollection)
});
}
};
});
The problem was the isolate-scope for the directive was not set.
app.directive('sortable', function ($timeout) {
return {
restrict: 'A',
link: function ($scope, $elem, attrs) {...},
scope: { items: '=' }
}
<div id="sortable-basic" sortable items="menuItems">

How can I access the function in child directive which passed from parent directive but defined in controller?

I have a parent directive and a child direcive, all in a controller, view is here:
<body ng-app="myApp">
<section ng-controller="TestController">
<section parent-directive parentFn="callback">
<child-directive>
<button ng-click="save()">save</button>
</child-directive>
</section>
</section>
</body>
I want to access the callback function which defined in TestController but passed into the parentDirective and then passed into the childDirective.
my js code:
var myModule = angular.module('myApp', []);
myModule.controller('TestController', function($scope) {
$scope.callback = function(){
console.log('callback invoked');
};
});
myModule.directive('parentDirective',function(){
return {
restrict: 'EA',
scope: {
parentFn: '&'
},
controller: function($scope){
this.parentFn = $scope.parentFn;
}
}
});
myModule.directive('childDirective',function(){
return {
restrict: 'EA',
require: '?^parentDirective',
transclude: true,
template: '<div ng-transclude></div>',
link: function(scope, element, attrs, controller){
console.log("child:c:%o",controller);
scope.save = function(){
console.log('save fn invoked');
console.log('is parentFn type:%o',typeof controller.parentFn);
controller.parentFn();
}
}
}
});
here is a jsfiddle:
https://jsfiddle.net/savokiss/j6gp720c/
And when I click the button the callback invoked does not appear in my console.
Why?
You are not passing the function in directive element correctly, Directive attribute name should be in small case and then Uppercase should be converted with small case with prefixed hyphen. like here parentFn should be parent-fn and then its value should have the method call.
<section parent-directive parent-fn="callback()">
<child-directive>
<button ng-click="save()">save</button>
</child-directive>
</section>
Fiddle

Angular directive not applied on change of the value

I have a directive like
testApp.directive('changeValue', function(){
alert("coming");
return {
restrict: 'E',
link: function (scope, element, attrs) {
element.text(attrs.val);
},
replace: true
};
});
and I have my views as follows
<change-value val="{{test.val}}"/>
When I refresh my page, I could see the values and I get the alerts. But when the value is changed I don't get it applied to the directive but it binds to the view as I could see it being changed outside when simply called like
<span>{{test.val}}</span>
I am not sure how this works. Thanks in Advance!
In your code, the link function is executed only once so the value is updated only when the directive instance is created. Since you want to have a watch of its value and keep updating the text you can use $observe()
var app = angular.module('my-app', [], function() {})
app.controller('AppController', function($scope) {
$scope.test = {
val: "Welcome"
};
});
app.directive('changeValue', function() {
return {
restrict: 'E',
link: function(scope, element, attrs) {
attrs.$observe('val', function() {
element.text(attrs.val);
})
},
replace: true
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="my-app" ng-controller="AppController">
<change-value val="{{test.val}}"></change-value>
<input ng-model="test.val" />
</div>

Access $scope from isolated directive

I want to change a $scope variable from inside an isolated directive, how is this possible?
I have tried using the '#, =, &' syntax in the directive scope but cannot get it to work.
This is my simplified code
JS
app.controller('testCtrl', function($scope) {
$scope.hello = 'hello';
}
app.directive('testDirective', function() {
return {
restrict: 'E',
template: '<div>{{text}}</div>',
scope: {},
link: function(scope, element) {
scope.text = 'this is my text';
scope.hello = 'hello world!';
}
};
});
HTML
<body>
{{ hello }}
<test-directive />
</body>
This is the output i want
hello world!
this is my text
You can set a require option on the directive and specify a parent controller. This will pass the controller to your link function as the last argument:
app.directive('testDirective', function() {
return {
restrict: 'E',
template: '<div>{{text}}</div>',
require: '^testCtrl',
scope: {},
link: function(scope, element, attrs, testCtrl) {
scope.text = 'this is my text';
testCtrl.setHello('hello world!');
}
};
});
Note you have to create this testCtrl.setHello() method on your controller. This is because you get the controller itself, not its injected scope:
app.controller('testCtrl', function($scope) {
$scope.hello = 'hello';
this.setHello = function(newHello) {
$scope.hello = newHello;
}
}
Also, if you don't really care about strictly enforcing the controller dependency, you can directly access scope.$parent.$parent.hello from your directive.
In HTML, the directive must be in snake-case:
<test-directive />
In your script, the directive must be defined in camel case:
app.directive('testDirective', function() {
});
Also, add the ngController directive:
<body ng-controller="testCtrl>
</body>
Here's what was missing:
ng-controller was not defined
# means passing the attribute as a string, = means binding the property to a property from the parent's scope (which is what we need here) and & means passing in a function from the parents scope to be called later.
when the directive is called "testDirective" it looks in the HTML as follows:<test-directive></test-directive> as camel cases in JS need to be
seperated by "-" in HTML.
<body ng-controller="testCtrl">
{{ hello }}
<test-directive hello-from-parent="hello"></test-directive>
</body>
app.directive('testDirective', function() {
return {
restrict: 'E',
scope: {
hello: "=helloFromParent"
},
template: '<div>{{text}}</div>',
link: function(scope, element, attrs) {
scope.text = 'this is my text';
scope.hello = 'hello world';
}
}
});
I set up a working plnkr here

Creating a custom attribute with AngularJS

I'm new to AngularJS. I'm trying to write a directive that will set the background-color of a <div> based on some scenario. Essentially, in my view, I want to be able to write this code:
<div effect-color="#2D2F2A">content here</div>
or
<div effect-color="{{effectColor}}">content here</div>
I know I need a directive. Currently, I'm doing this:
.directive('effectColor', [
function () {
return {
restrict: 'A',
controller: [
'$scope', '$element', '$attrs', '$location',
function ($scope, $element, $attrs, $location) {
// how do I get the value of effect-color here?
}
]
}
}
]);
I'm not sure how to get the value of the attribute itself. Do I need to add a scope? I just want the attribute value.
Thank you!
Here are two methods... First gets the attribute value through looking at the elements attribute value of your directive. The second gets passed the attribute value and attached to the isolated scope of your directive. Please note I have replaced your controller with a linking function. I suggest you give this article a read: https://docs.angularjs.org/guide/directive
Codepen: http://codepen.io/anon/pen/cGEex
HTML:
<div ng-app="myApp">
<div effect-color-one="#123456"></div>
<div effect-color-two="#123456"></div>
</div>
JavaScript:
angular.module('myApp', [])
.directive('effectColorOne', function () {
return {
restrict: 'A',
link: function (scope, element, attrs) {
console.log('example 1: ' + attrs.effectColorOne);
}
}
}
)
.directive('effectColorTwo', function () {
return {
restrict: 'A',
scope: {
effectColorTwo: '#'
},
link:function (scope) {
console.log('example 2: ' + scope.effectColorTwo);
}
}
}
);
Another example
combining the above example and the ability to change the background colour of the element which the directive attribute resides is below:
Codepen: http://codepen.io/anon/pen/HospA
HTML:
<div ng-app="myApp">
<div effect-color="red">Hello</div>
</div>
JavaScript:
angular.module('myApp', [])
.directive('effectColor', function () {
return {
restrict: 'A',
link: function (scope, element, attrs) {
element.css('background-color', attrs.effectColor);
}
}
}
);
You can get the value in your directive controller using $attrs parameter object
$attrs.effectColor // #2D2F2A
From the docs:
attrs is a hash object with key-value pairs of normalized attribute
names and their corresponding attribute values.
Also if you are going to modify the DOM (in your case applying background color) you should use link option.
DEMO
Seems like a duplicate of How to get attribute value of a custom tag in angularjs?
I think you need something like scope: { data: "=data" } in the definition of your directive
Please see here :http://jsfiddle.net/MP8ch/
<div ng-app="app">
<div ng-controller="firstCtrl">
<div effect-color="#fc9696">
<P>content here</P>
</div>
</div>
</div>
JS:
var app = angular.module('app', []);
app.directive('effectColor', function () {
return {
restrict: 'AE',
transclude: true,
// replace:'true',
scope: {
color: '#effectColor'
},
restrict: 'AE',
template: '<div style="background-color:{{color}}" ng-transclude></div>'
};
});
app.controller('firstCtrl', function ($scope) {
});
You can create an isolate scope and bind the attribute to it:
myApp.directive('effectColor', [
function () {
return {
restrict: 'A',
scope: {
effectColor: '='
},
link: function (scope, element, attrs) {
element.css({
color: scope.effectColor
});
},
controller: [
'$scope', '$element', '$attrs', '$location',
function ($scope, $element, $attrs, $location) {
console.log($scope.effectColor);
}]
}
}]);
http://jsfiddle.net/R7Rb6/
It's a scenario of a directive with itself as the attribute. See here that how can you actually get value in your directive.

Categories