I'm using AngularJS in a project of mine, and I wanted to try creating directives. I already followed several tutorials and I can't see where I'm doing it wrong. Even worst, it doesn't shows up any error or warning message, but it also does not executes the directive's function. Right now, my code is pretty much this:
angular.module('components', []).directive('ngxOnshow', function() {
return {
restrict: 'A',
link: function(scope, element, attrs){
console.log("hello world")
//Resto do código da função
}
};
});
var module = angular.module('app', ['components']);
In the body of the HTML page I have this:
<body ng-autobind ng-app="app">
But then, when I use the directive, it does not work.
<div ng-show="showApp == true" ngx-onshow="showAppBar()">
</div>
The rest of the application works just fine, the bindings, the default directives, everything except this. Perhaps I'm missing something?
Thanks, Scorch :)
I'm using AngularJS in a project of mine, and I wanted to try creating directives. I already followed several tutorials and I can't see where I'm doing it wrong. Even worst, it doesn't shows up any error or warning message, but it also does not executes the directive's function. Right now, my code is pretty much this:
angular.module('components', []).directive('ngxOnshow', function() {
return {
restrict: 'A',
link: function(scope, element, attrs){
console.log("hello world")
//Resto do código da função
}
};
});
var module = angular.module('app', ['components']);
In the body of the HTML page I have this:
<body ng-autobind ng-app="app">
But then, when I use the directive, it does not work.
<div ng-show="showApp == true" ngx-onshow="showAppBar()">
</div>
The rest of the application works just fine, the bindings, the default directives, everything except this. Perhaps I'm missing something?
Thanks, Scorch :)
Share Improve this question asked Jan 14, 2013 at 20:26 Pedro M. SilvaPedro M. Silva 1,2982 gold badges12 silver badges23 bronze badges 9- 1 It prints "hello world" to the console for me... – Joe Dyndale Commented Jan 14, 2013 at 20:33
- 1 Your error must be somewhere else. I've copied and pasted your exact code into a jsFiddle (jsfiddle.net/ZDPTJ/1) and I see "hello world" in the console. – Lukas Commented Jan 14, 2013 at 20:33
- Did you remember to add the file with the directive code to your index.html? Sorry, but I had to ask - forgotten that a couple times myself ;) I'm really just assuming you have all that code in a single.js file at the moment though, so it's likely something else. Just a control question :) – Joe Dyndale Commented Jan 14, 2013 at 20:35
- Yes, I have. The javascript in the rest of the file works just fine. Maybe the bug is with the Firebug? Is there any other way to check that out without console? I've tried alert and it didn't work either. Also, I've checked with the Firefox console to make sure the problem wasn't something with firebug, and it said that theuse of console log functions had been desactivated by a script on that page. Is it firebug or another script in my page doing that? – Pedro M. Silva Commented Jan 14, 2013 at 20:44
- 1 Finally found what was messing up. In fact, it was a noob mistake: I had a ng-app in the html tag too, and never noticed, and that was blocking the ng-app in the body tag. Really sorry for taking your time, guys. Thanks, it's working now. :) – Pedro M. Silva Commented Jan 17, 2013 at 19:21
3 Answers
Reset to default 11Use '&' to allow a directive to execute an expression/function defined in the parent scope. $observe an interpolated isolate scope attribute (i.e., one defined with '@' that contains {{}}) to determine when it changes:
myApp.directive('ngxOnshow', function () {
return {
restrict: 'A',
scope: {
showApp: '@',
ngxOnshow: '&'
},
link: function (scope, element, attrs) {
console.log("inside link function")
attrs.$observe('showApp', function (newValue) {
newValue === "true" && scope.ngxOnshow()
})
}
};
});
newValue is compared with "true" not true because interpolated values are always strings.
HTML:
<div ng-show="showApp == true" show-app="{{showApp}}" ngx-Onshow="showAppBar()">
Fiddle.
Most of directive errors are displayed in the console, just enable logging:
app.config(function($logProvider){
$logProvider.debugEnabled(true);
});
Thus you'd have no need to guess why directive is't working.
I don't really know what the directive should do, because all you have is a console.log. But since you pass a function to the ngxOnshow argument, I suppose you want to execute it. You need to tell the directive to execute the function from the parent with scope set to &:
angular.module('components', []).directive('ngxOnshow', function() {
return {
restrict: 'A',
scope: {
ngxOnshow: '&'
},
link: function(scope, element, attrs){
console.log("hello world")
//Resto do código da função
}
};
});