 AngularJS: Call external functions from directive?
By : Helena Shaw
Date : March 29 2020, 07:55 AM
Hope that helps I'm trying to create a custom component that uses external functions defined in the controller, but I'm experiencing different problems. , For example, you can use the & binding, like: code :
scope: {
'fctn': '&extFunction'
},
|
 How do I call a method on an Angularjs directive from outside it's template?
By : Kevin Kalb
Date : March 29 2020, 07:55 AM
I hope this helps you . The way this sort of thing is usually handled is by coordinating using a service. The state is managed by the service, and the directive only responds to changes in the state as far as it needs to modify the DOM, hide or display elements, etc. Your controllers outside can also have this service injected and call methods to change the state, such as move the step forward or back, reset the wizard, etc. It's possible that the service would broadcast events for state changes, such as the step changing, and the directive would listen in on those events to update the view. code :
.factory('wizard', function() {
// private state
var state = {
steps: [],
selectedIndex: 0,
};
// public methods for manipulating the state
return {
next: function() {
var i = state.selectedIndex + 1;
if (i < state.steps.length) this.select(state.steps[i]);
},
prev: function() {
var i = state.selectedIndex - 1;
if (i > -1) this.select(state.steps[i]);
},
select: function(step) {
for(var x = 0; x < state.steps.length; x++){
var current = state.steps[x];
if ((angular.isNumber(step) && step === x) || current == step) {
current.selected = true;
state.selectedIndex = x;
} else {
current.selected = false;
}
}
},
addStep: function(step) {
state.steps.push(step);
if (state.steps.length === 1) this.select(step);
},
// lets a consumer get or set the current state. this is how the wizard directive grabs the state which is binds to in the template
state: function(newState) {
if (arguments.length === 0) return state;
if (newState) {
state = newState;
if (!state.steps) state.steps = [];
if (isNaN(state.selectedIndex)) state.selectedIndex = 0;
}
}
};
})
|
Call controller functions inside directive in AngularJS
By : Type2Designs
Date : March 29 2020, 07:55 AM
it should still fix some issue First of all i highly recommend you not to put dom event logic inside a controller, it goes against everything done by the angular team to prevent that from happenning. What i'd do in your situation would be to create a directive somewhat like this: code :
.directive('scrollAnchor', function($state) {
return {
link: function(scope, element, attrs){
scope.startListenToScroll = function(){
var position = element.position();
element.scrollspy({
min: position.top,
max: position.top + $(this).height(),
onEnter: function(ele, position) {
if(ele.id){
$state.transitionTo('about.'+ele.id);
} else {
$state.transitionTo('about');
}
}
});
};
scope.stopListenToScroll = function(){
element.off().removeData();
};
},
controller: function($scope){
this.startListenToScroll = $scope.startListenToScroll;
this.stopListenToScroll = $scope.stopListenToScroll;
}
};
});
.directive('scrollTo', function() {
return {
require: 'scrollAnchor',
link: function(scope, element, attrs, scrollAnchorCtrl) {
element.bind('click', function() {
scrollAnchorCtrl.stopListenToScroll();
var divPosition = $('#'+attrs.scrollTo).offset();
$('html, body').animate({
scrollTop: divPosition.top
}, "slow", function(){
scrollAnchorCtrl.startListenToScroll();
});
});
}
};
});
|
Where To Put AngularJS Directive-Template Functions
By : Jan
Date : March 29 2020, 07:55 AM
hop of those help? If I do something like this in my directive: , Doing something like this will serve your purpose. Give a try .. code :
angular.module("myApp", [])
.directive("mydiv", function() {
return {
template: '<button ng-click="Done()">DONE</button>',
link: function (scope, element, attrs) {
scope.Done = function () {
alert('Done');
}
}
};
});
$scope.Done = function() {
alert('Done');
};
|
Call controller function from directive template in AngularJS
By : Sharon Toure
Date : March 29 2020, 07:55 AM
help you fix your problem You can define your controller in your directive like so, and add an ng-click directive to the button element 'Confirm' in your template.
|
code :
Related Posts :