As in the title. I would like to increment value inside directive template.
I tried this:
var ngApp = angular.module("ngApp", []);
ngApp.controller("AppCtrl", function(){
var app = this;
app.counter = 1;
app.foo = function(){
app.counter++;
return app.counter;
}
});
ngApp.directive("box", function(){
return {
restrict: "E",
template: "<div>BOX - {{app.foo()}}<div>"
}
});
But it does not work. Any ideas?
What would you like to do? Increment the value when the directive is compiled the first time? If so then you can do this:
ngApp.directive("box", function(){
function ctrl($scope) {
$scope.counter = $scope.app.foo();
}
return {
restrict: "E",
scope: true,
controller: ctrl
template: "<div>BOX - {{counter}}<div>"
}
});
Try like this , you dont need to return any value , but you should call foo function, for example on click or somwhere else in your code where you need it
var ngApp = angular.module("ngApp", []);
ngApp.controller("AppCtrl", function(){
var app = this;
app.counter = 1;
app.foo = function(){
app.counter++;
}
});
ngApp.directive("box", function(){
return {
restrict: "E",
template: "<div ng-click='app.foo()'>BOX - {{app.counter}}<div>"
}
});
You can put your controller inside of your directive:
var ngApp = angular.module("ngApp", []);
ngApp.directive("box", function(){
return {
restrict: "E",
controllerAs: 'app',
controller: function(){
var app = this;
app.counter = 1;
app.foo = function(){
app.counter++;
}
},
template: "<div>BOX - {{app.foo()}}<div>"
}
});
$index. Check out ngRepeat.