I have two functions drag_drop and drag_start , inside these functions I nedd some data from a controller scope.
My code is somthing like that
function drag_start(event) {
event.dataTransfer.dropEffect = "move";
event.dataTransfer.setData("text", event.target.getAttribute('id'));
}
function drag_drop(event) {
// here I want to use $scope from a controller
}
controller code :
institutionController.controller('institutionController',function
$http.get('/myResponses').then(function(myres) {
$scope.myRps=myres.data;
// I want to use $scope.myRps when I drag and drop an element inside a div
HTML code :
ul(ng-hide="siwtchCI",class="list-inline")
li(ng-repeat="ownInst in ownInsts",draggable='true',ondragstart='drag_start(event)')
a(class="btn btn-default btn-org" ,role="button") {{ownInst.org.name}}
#drop_zone(ondrop='drag_drop(event)', ondragover='return false')
the problem is when I put my two functions inside the controller my html elements are not draggable anymore
Try declaring the functions drag_start and drag_stop in scope.
Also on html you need to specify something as below
ondragstart="angular.element(document.getElementById('xyz')).scope().drag(event)"
This would surely call the drag method you have defined in the controller
where xyz represents id of the html element to be dragged.
I'm assuming that you used 'ng' directives on the HTML side, that's why regular functions don't work. Please be a habit that if you are going to create a function inside a controller, might as well put a scope into it.
$scope.drag_start = function(event){
}
$scope.drag_drop = function(event){
}
This should do the trick
Related
Am in a position of overriding a js function which is inside another function.
For example:
function parentMethod(){
function someOtherMethod(){
alert("Am someone")
}
function childMethod(){
alert("Am Child")
}
childMethod()
}
childMethod = function(){
alert("Am Child New")
}
Actually I want to override a sub function of the out-of-the-box js scirpt provided by sharepopint.If I override parentMethod it is working correctly but it will produce 1300 lines of code duplication since we are actually overriding one of the many available functions.
How can I achieve it without code duplication.
Any help would be greatly appreciated.
Thanks in advance.
The childMethod you mentioned is not accessible outside the scope of the parent unless the parent function is defined properly i.e. the childMethod you are trying to access is not linked to the parent. e.g.
var parentMethod = function (){
this.someOtherMethod = function (){
alert("Am someone")
}
this.childMethod = function(){
alert("Am Child")
}
}
There is no proper way of achieving this with the current state of the parent class however I made a working fiddle for the sake of a working example. https://jsfiddle.net/eaqnnvkz/
var parentMethod = {
someOtherMethod: function() {
alert("Am someone")
},
childMethod: function() {
alert("Am Child")
}
};
parentMethod.childMethod();
parentMethod.childMethod = function() {
alert("Am Child New")
};
parentMethod.childMethod();
Unfortunately, unless the script is written to attach the sub-function to an accessible scope, it can't be overridden selectively. A function inside a function, by default, is not individually accessible.
A rather hackish way this might be attempted would be to get the source of parentMethod(), via parentMethod.toString(), and then to use a regular expression to replace the child method, and then to replace the original version of the function with the altered version using eval(). This is likely not a long-term solution and I would personally discourage it, but it would theoretically accomplish the requested effect.
I would like an external button to trigger the same function beneath, onclick. Anybody knows how I do that?
Function is inside a variable
var mTid = { ....
init: function() { .....
.....
mTid.$form.addEventListener("submit", function(event) { //This is the function I would like to invoke from a button outside the form
}, true);
// [v] is just instead of .value
If I'm understanding you correctly, you're trying to access an anonymous function from outside. While there may be a way to do this is JavaScript, I don't suggest it. Instead, consider pulling the anonymous function out and instead making it a stand alone function you can pass to addEventListener(). You would end up with code such as this:
function example(event) {
...
}
mTid.$form.addEventListener("submit", example);
It's generally a best-practice to use anonymous functions only when the function will be used in one case and one case only. By pulling the function out, you can then use it in many different ways such as passing it as an action for an external button.
I'm running Angular 1.4.3.
I'm trying to create a 'factory' in angular that helps me create a common menu system in my app. The 'create' function of the 'gui' factory creates a ul and the li elements are clickable with ng-click.
This ul is attached to the document body.
The ng-click should execute the 'callMe' function in my factory, but I'm not sure what scope to use....
Code:
var App = angular.module('App', ['ngRoute']);
App.factory('gui', function() {
var menu = function {
"create" : function(){
var menu_container = $('<div id="menu"></div>');
var menu_ul = $('<ul></ul>');
menu_ul.append('<li class="menu-item-purple" ng-click="gui.menu.callMe()"><a>About <span style="float: right;">></span></a></li>');
menu_container.append( menu_ul );
menu_container.prependTo(document.body);
},
"callMe" : function(){
console.log("I HAVE BEEN HIT");
}
}
return {
"menu" : menu
};
})
.controller('ExampleController', function($scope, gui){
$scope.gui = gui;
gui.menu.create();
})
So in the above code, when I click the li menu button - I do not get any response.
I have tried the following in the li element:
ng-click="this.callMe()"
I thought the original should work because if I hard code the html into the view with that ng-click directive, it works. I assume it could be something to do with load order as the gui.menu object should be present in the view as it's passed in the controller's scope?
Since your factory actually involves with some DOM operation, I would suggest you defining a directive.
You can define your ul, li elements in the directive template and also handles the ng-click events. A directive is the best choice to share some DOM structure as well as the logic across different places in your application.
To access the method contained within your factory in the template, you need to change the 'this' variable to gui, that's because your methods are contained in a variable named gui inside your scope.
Although, it may be easier to create a function inside your scope for the thing you want to do.
$scope.createMenu = function () { gui.menu.create(); };
And then, you can call the function directly in the template with
ng-click="createMenu()"
But, as #Joy said it would be better with a directive since your DOM is modified
I have an issue with my angular.js directive.
It should be a kind of autocomplete, in directive's controller property I'm loading an array of values and inside link function compiling template to show the results.
But when I update scope inside link it doesn't reflect on controller and template, please take look at the example here - http://plnkr.co/edit/Lz3QGwklghPo3as2QTqU
Should I apply scope changes or smth similar?
Your code has two problems
Attach click event to document instead of body
Use $apply() inside bind
Below code will resolve your problem
$document.bind('click', function (e) {
scope.results = [];
scope.$apply();
});
I update your $body.bind('click',...) method to
$body.bind('change', function (e) {
scope.results = [];
});
and it seemed to work (I mean that after 0.5 sec I typed a letter, the list of name is re-displayed).
Is there anyone who knows how to destroy a javascript (jquery) function?
I'm using jquery "selectable" and a function call "edit" is fired on selectable "stop" event.
Inside this "edit" function I have nested switch functions with a lot of "click" events
and I have many functions within each "click" event. My problem is,
every time I fire the "selectable" functions and events inside the function "edit" is fired again but the previous functions and events still exist.
What i do now is to unbind every event in the function "edit" on selectable "start" even.
Is this a memory leak problem?
and is there a way to "destroy" functions in javascript?
i have tried to declare the function to null when the function ends but this does not work. functions and events inside it still exist.
anyone have a clue?
demo page here -->
http://dreamerscorp.com/test/test01/javascript_destory_test.html
edit 2009/10/31
:) thanks a lot for your helps, your comments are very useful to me, thanks again!!!
You can try to nullify the function, or override it assigning an anonymous function that does nothing:
myFunction = null;
// or
myFunction = function () {};
You can also do it within the function itself:
var autoDestroy = function () {
autoDestroy = null;
//...
return 1;
};
autoDestroy(); // returns 1
autoDestroy(); // TypeError: autoDestroy is not a function
to unbind events in jquery use unbind function http://docs.jquery.com/Events/unbind
$("something").click(function() {
$("anotherOne").click(function() {
....
});
});
in this example, every time "something" is clicked, an event handler is added to "anotherOne", so if you click three times, you'll get three event handlers.
$("something").click(function() {
$("anotherOne").unbind('click').click(function() {
....
});
});
here you're guaranteed to have only one click handler on "anotherOne".
There's no need to destroy previous handler explicitly.
Basically you need to remove all references to those functions so that the JavaScript garbage collector can collect them. If they are bound, you need to unbind them. If there are other variables in there that point to them, they need to be set to null.
It might help if you posted some code; then we can give a better answer.
...EDIT:
What's happening here is, you're creating a closure that will outlive the containing function:
function edit(){
$('.edit').click(function(){
//...
function _edit(boxTitle,selectedItemAmount){
//...
$('#box .yes').click(function(){
alert(boxTitle + ' for ' + selectedItemAmount + ' selected item');
$('#msg').hide(); // hide msg box when yes btn is clicked
});
}
//...
$('#box .no').click(function(){
$('#msg').hide();
});
});
In other words, inside a function, you're saying, "Attach this function to a DOM object," and you're doing it inline. JavaScript captures variables from outer contexts and keeps them alive while the reference to the inner context is alive.
What you need to do is to define the functions somewhere not inline and then use them:
function boxClickYes(e) {
alert(e.data.boxTitle + ' for ' + e.data.selectedItemAmount +
' selected item');
$('#msg').hide(); // hide msg box when yes btn is clicked
}
function boxClickNo(e) {
$('#msg').hide();
}
function edit(){
$('.edit').click(function(){
//...
function _edit(boxTitle,selectedItemAmount){
//...
$('#box .yes').bind("click", {boxTitle: boxTitle,
selectedItemAmount: selectedItemAmount}, boxClickYes);
}
//...
$('#box .no').click(boxClickNo);
});
This also demonstrates how to use the data property in jQuery click handlers to store data in between the time you attach the handler and the time you use it (instead of storing that data in a closure that will keep the scope chain in memory). Using inline-defined functions is fine when you're just using it right there (like the body of a $.each, for instance) but it's not OK when you're attaching event handlers.
To "destroy" a function in javascript, simply ensure that the function becomes unreachable. This will enable the function to be eligible for reclamation. One thing to watch out for is that javascript variables are bound based on scopes (not as individual variables) and a scope, with many unused objects, may persist if a binding is kept to the scope: to provide any more help requires knowledge of the specific code and how it is used.
Please see the javascript delete operator as one way of removing a variable or object member. Setting the value to null/undefined/other-object removes on method of reaching the object previously referenced (although it might still be reachable otherwise and thus not be reclaimed) but does not get rid of the variable/member.
delete variable
delete obj.member
delete obj[member]