I have no idea why, but:
#myApp.directive 'myDirective', () ->
return {
restrict: 'E',
scope: {
source: '='
},
link: (scope, element, attrs) ->
console.log scope.source
}
<my-directive source="foobar"></my-directive>
returns undefined. The thing which confuses me is that in my other directive, print-user, everything works fine.
return {
restrict: 'E',
scope: {
user: '=',
showName: '=',
showAvatar: '=',
avatarSize: '='
},
templateUrl: 'templates/partials/print-user.html',
link: (scope, element, attrs) ->
scope.tooltip = scope.user.username
}
Here I'm able to get the user object within the template by {{user}}.
Within myDirective I could get the source attribute by attrs.source - but why is it working within my user directive?
EDIT / Solution
Thanks to Aleksandar Bencun: using <my-directive source="'foobar'"></my-directive> (additional single quotes) solved the problem.
Related
.directive('clinicalTrailModal', function ($compile) {
return {
restrict: 'EA',
scope: {
context: '=',
dui: '='
},
templateUrl: 'app/templates/lbdAdsModal.html'
})
I am calling this directive based on true false condition like below,
<clinical-trail-modal value="currentUrl" dui="typeDisease._id" data-ng-if="clinicalTrailModal"></clinical-trail-modal>
But it does'nt work.When I remove
restrict: 'EA',
scope: {
context: '=',
dui: '='
},
this it works.I am new to angularjs.Can anyone please help me.Thanks.
It's possibly failing due to you passing context into the scope. Either remove context, pass it in, or make it optional.
restrict: 'EA',
scope: {
context: '=?', //optional
dui: '='
}
Here is my code
'use strict';
angular.module('app')
.directive('item'
, ["$timeout"
, "$Service"
, function(
$timeout
, $utils) {
return {
restrict: 'A',
scope: {
item: '=',
},
transclude: true,
link: function(scope, element, attrs, ctrl, transclude){
},
templateUrl: $fsUtils.getRelativeUrl('templates/item.html'),
controller: 'ItemCtrl',
};
}]);
My index.html:
<item><div>Transcluded content.</div></item>
transclude variable is undefined and ctrl variable is proto__: Object.
I need to inject parent scope into transcluded scope. The transclude variable is undefined. Where am I going wrong.
My angular version is 1.1.5
Thanks.
What you're looking for is the transcludeFn. Try this:
transclude: true,
transcludeFn: function () { /*do your stuff here*/ },
...
link: function(scope, element, attrs, controller, transcludeFn)
To access controller in link function you can do this:
var controller = scope.controller;
I am trying to create series of directives which cummunicates via controller. This is what I have now:
angular.module('drmApp')
.directive('formInput', function () {
return {
templateUrl: 'views/directives/forminput.html',
restrict: 'E',
controller: 'ForminputCtrl',
controllerAs: 'ctrl',
bindToController: true,
transclude: true,
scope: {
model: '=',
errors: '=',
property: '#',
label: '#',
form: '=?',
},
link: function postLink(scope, element, attrs, ctrl, $transcludeFn) {
console.log($transcludeFn());
}
};
})
.directive('formInputValidationSummary', function() {
return {
restrict: 'E',
require: '^formInput',
transclude: true,
link: function postLink(scope, element, attrs, ctrl, $transcludeFn) {
ctrl.setValidationSummary($transcludeFn);
}
}
})
.directive('formInputContent', function() {
return {
restrict: 'E',
require: '^formInput',
transclude: true,
link: function postLink(scope, element, attrs, ctrl, $transcludeFn) {
ctrl.setInput($transcludeFn);
}
}
});
HTML Markup:
<form-input model="entity"
label="{{ 'WYKONAWCA_COLOR' | translate }}"
errors="errors"
property="color"
form="form">
<form-input-content>
<input colorpicker="rgb" ng-model="model.color" type="text">
</form-input-content>
</form-input>
Sadly, currently I am receiving this error:
Error: [$compile:ctreq] Controller 'formInput', required by directive 'formInputContent', can't be found!
I am using latest angular from v1.4 series. Also, this does not work with angular ~1.3. Is there something that I have forgot about? Did I misunderstand directive features?
Since you are transcluding transclude: true, Angular yanks the transcluded content out of the DOM - so, <form-input-content> is now not a child of <form-input>.
Then, when you are invoking the transclude function, this links the directive - and at that time it complains about not being able to find the parent formInput controller.
When you transclude, be sure to place the transcluded content back in the DOM:
link: function postLink(scope, element, attrs, ctrl, $transcludeFn) {
$transcludeFn(function(transcludedContentClone){
// this happens prior to linking of transcluded content
element.append(transcludedContentClone);
});
// ...
}
I am trying to implement dynamically configurable fields. I will get validation rules ng-required, ng-hidden, ng-disabled etc attributes as json from the server and set them dynamically through a directive.
I have the following directive code. It displays select values doubled JsBin link is http://jsbin.com/jiququtibo/1/edit
var app = angular.module('myapp', []);
app.directive('inputConfig', function( $compile) {
return {
require: 'ngModel',
restrict: 'A',
scope: '=',
compile: function(tElem, tAttrs){
console.log("compile 2");
tElem.removeAttr('data-input-config');
tElem.removeAttr('input-config');
tElem.attr('ng-required',true);
return {
pre: function (scope, iElement, iAttrs){
console.log('pre');
},
post: function(scope, iElement, iAttrs){
console.log("post");
$compile(tElem)(scope);
}
}
}
};
});
How can I solve this issue? I should be able to add directive dynamically.
To solve your problem you need to remove the following line from your post function:
$compile(tElem)(scope);
It's not clear to me why you are compiling here so I'm not sure if there will be any unintended side effects from this.
I found a solution following code is working.You should first clone, remove directive, prepare dom and compile
app.directive('inputConfig', function( $compile) {
return {
require: '?ngModel',
restrict: 'A',
compile:function (t, tAttrs, transclude){
var tElement = t.clone() ;
tElement.removeAttr('input-config');
tElement.attr('ng-required',true);
t.attr('ng-required',true);
return function(scope){
// first prepare dom
t.replaceWith(tElement);
// than compile
$compile(tElement)(scope);
};
}
}
});
I want to get a value straight from an attribute directive:
<form cronos-dataset="People as p">
Form Content
</form>
In my JS I tried:
app.directive('cronosDataset',[function() {
return {
restrict: 'A',
controller: 'CronosGenericDatasetController',
scope: {
"cronos-dataset" : '#'
}
};
}])
.controller("CronosGenericDatasetController",['$scope', function($scope) {
alert($scope["cronos-dataset"]);
}]);
I want to alert "People as p" string but I get undefined. Is that right path or should I go thorough a different approach?
You are supposed to have camelCase in the scope declaration
app.directive('cronosDataset',[function() {
return {
restrict: 'A',
controller: 'CronosGenericDatasetController',
scope: {
cronosDataset : '#'
}
};
}])
Here is a demo to see different variations
http://plnkr.co/edit/G6BiGgs4pzNqLW2sSMt7?p=preview
Make a link function instead:
app.directive('cronosDataset',[function() {
return {
scope: {},
restrict: 'A',
link: function (scope, elem, attrs) {
alert(attrs.cronosDataset);
}