Here is my directive:
return {
restrict: 'E',
scope: {
showBorder: '='
},
link: function (scope, element) {
alert(scope.showBorder);
Here is my directive written inside HTML:
<my-directive showBorder="true"></my-directive>
But alert saying - scope.showBorder is undefined?
What did I miss here?
Atribute names are camelcase.
So if you define showBorder in the scope you need to reference it with show-borderin your directive html.
ex:
<my-directive show-border="true"></my-directive>
Related
I made a custom directive that retrieves data from a controller.
My variable is visible inside the scope element but when trying to access it, I got undefined
HTML
<map borders="vm.borders"></map>
Directive
angular.module('myApp.directives')
.directive('map', [ function() {
return {
restrict: 'E',
scope: {
borders: '='
},
link: function(scope, element, attrs) {
console.log(scope); //cfr linked image
console.log(scope.borders) //undefined
}
}
}]);
Here is the scope. It contains the borders variable.
What am I missing to retrieve this borders value ?
I could suggest to add an ng-if to the directive, because for example if vm.borders are got from a promise, ng-if is required:
<map borders="vm.borders" ng-if="vm.borders"></map>
I can't seem to reach the link function scope variable from inside a function in my directive. The "elem" variable is defined, but the scope isn't. Why is that??
Here's my directive:
function contextMenu($document){
return {
scope: {
target: '=',
},
restrict: 'A',
link: function(scope, elem, attr) {
elem.bind('contextmenu',handleRightClick);
function handleRightClick(event) {
// do something with scope (scope is undefined)
}
}
}
};
How can I user the scope variable?
Thanks!
Uri
EDIT1:
I found I can use this to pass the scope to the function:
Passing parameters to click() & bind() event in jquery?, but this still doesn't explain why the scope variable is undefined.
EDIT2:
For completeness sake, this is how my directive is set up:
app.js
angular
.module('myModule', [])
.directive('contextMenu', ['$document', components.contextMenu])
and in the html:
<div context-menu target="testObject">
Make sure you are using the directive correctly. Since you didn't include the use of the directive in your template, I hope you used it something like this:
<div context-menu target="something"></div>
Then I am confused about the setup of your directive. Try this:
MyDirectiveModule.directive('contextMenu', function(){
return {
restrict: 'A',
scope: {
target: '#'
},
link: function(scope, element){
console.log(scope);
// don't use $scope!
}
};
});
Make sure to use scope instead of $scope in the link: part.
I am trying this:
app.directive('adminTemplate', ['stateService', function (stateService) {
return {
restrict: 'E',
scope: {
src: "="
},
templateUrl: src,
link: function (scope, element, attrs) {
scope.stateService = stateService;
}
};
}]);
But it's giving me an error with Typescript saying "Could not find symbol src".
How can I get the template and how could I call it with this directive?
Scope values are not accessible from within a directive's templateUrl. The attributes are not compiled yet, so from within this context it is not possible to access the scope.
Please check my answer on a similar question or the plunker
What I did there is using a template containing a div with ng-include.
I'm have this code:
<div ng-repeat="param in item.parameters">
<rating param_item="{{param}}"></rating>
</div>
how can i pass the given attribute to the directive template?
Personally, I like creating child scope for element directives:
http://plnkr.co/edit/Dz7fcZaT4KdRDa869rwm?p=preview
app.directive('rating', function() {
return {
restrict: 'E',
scope: {
paramItem: '#'
},
link: function(scope, element, attr){
console.log(scope.paramItem);
}
}
});
There are a couple other ways too, depending on how you expect your directive to work.
If I have a directive myDir and I call it within ng-repeat like so
<my-dir myindex="{{$index}}"></my-dir>
How can I access myindex? I get actual string {{$index}} when I use attrs.myindex within postLink function. When I inspect html, it actually says myindex="2".
Try
<my-dir myindex="$index"></my-dir>
Then
app.directive('myDir', function () {
return {
restrict: 'E',
scope: {
myindex: '='
},
template:'<div>{{myindex}}</div>',
link: function(scope, element, attrs){
scope.myindex = attrs.myindex;
console.log('test', scope.myindex)
}
};
})
Demo: Plunker