I'm trying to assign a function to a button using javascript, but for some reason it's not working. This is the button in question. At this point I'm just trying to make it responsive.
<button id="artbtn" class="artbtn btn">Art</button>
In the Chrome developer console I tried this:
document.getElementsByClassName("artbtn")[0].addEventListener(
"click", function(){
alert("hi")
})
and it did what I wanted, it threw up an alert. But when I tried using that script on the page... no response.
I'm using angular v1.2.7 with node.js which probably is contributing to this but I'm not sure what exactly is happening.
Best way to do this the angular way is to use ng-click
<button id="artbtn" class="artbtn btn" ng-click="clickHandler($event)">Art</button>
You will need to add the clickHandler function to your scope in your controller:
app.controller('MainCtrl', function($scope) {
$scope.clickHandler = function (event) {
alert('hi');
}
});
Here is a working plunker
Related
Using Angular, I am creating a countdown timer app. When the timer reaches a certain point, the timer stops, a notification sound is played and a div with a button is created.
Like so...
HTML:
<div id='test'></div>
Javascript:
document.getElementById('test').innerHTML= '<div id="break-div"><button id="4"ng-click="timerControl.resetTimer()">Back to work!</button></div>'
resetTimer() function inside of Angular timerControl controller
this.resetTimer = function(){
console.log(111)
_this.resetWorkFlow = true;
}
It creates the button fine enough, but when I click it to call the resetTimer() function inside of the timerControl Angular controller, it isn't even entering the function, otherwise the console.log(111) would be showing 111 in my Google Dev Tools in Google Chrome. Seems like it could be an issue with the DOM or something like that. I tried using jQuery and it seems like there isn't much information about this out there. Anyone encounter this before?
Angular doesn't know that you did the .innerHTML assignment. You have to tell it, by invoking $compile. See the docs: https://docs.angularjs.org/api/ng/service/$compile
There's a quick tutorial about the process here:
http://onehungrymind.com/angularjs-dynamic-templates/
You should be able to do this just with Angular (without jQuery) and the variables you have set up in the view's controller.
You could handle the creation of the button using an ng-if directive and manage this condition for button creation through controller variables (scope of controller being vm below). Then call the resetTimer() function within the view's controller.
For example:
<div ng-if="vm.resetWorkFlow">
<button id="4" ng-click="vm.resetTimer()">Back to work!</button>
</div>
I have a directive that should open file picker window when a controller variable changes. Here is the snippet of the directive:
angular.module('settingsInternal')
.directive('triggerUpload', function ($timeout) {
return {
restrict: 'A',
link: function (scope, element) {
scope.$watch('mainCtrl.watchedVariable', function (variable) {
if (variable) {
$timeout(function () {
element.triggerHandler('click');
}, 20);
}
});
}
};
});
The problem I'm having is that I cant trigger the ngf-select on the div. It works perfectly fine when manually clicking on the div, and the watch function calls element.triggerHandler('click') properly. I have wasted several hours trying to figure out the reason why this doesn't work, if someone had a similar problem please help me figure out where the problem lies.
P.s. Dont pay attention to variable names, they are for demonstrational purposes.
The problem wasn't in angular's ngf-select but in the input[type=file], which the directive uses. Input[type=file] has to be initialized by user made event, so if you want to open file upload window with a function you have to call that function from a user made event.
I hope this helps someone that has experienced a similar problem.
In my AngularJS application, I have the following code:
example.html
<div>
<p>{{name}}</p>
</div>
<div>
<button ng-click="someFunction()"> </button>
</div>
exampleController.js
angular.module('myApp').controller('exampleController', ['$scope', 'myService',
function($scope, myService) {
$scope.someFunction = function() {
}
function updateName() {
$scope.name = myService.getName();
}
updateName();
}]);
The problem is that {{name}} is only updated in the html when I click in the button. The updateName() function is running correctly and $scope.name is being correctly defined, but {{name}} is only shown when I click in some button to call some function. I don’t know why {{name}} is not shown when the page is loaded. Can someone help me?
The angular lifecycle can take some getting use to, but in a nutshell, angular directives only get re-evaluated during an angular event, like ng-click. This is one reason it's so important to use ng-click instead of onclick.
In this case, if your method isn't being called inside of the angular event cycle (like if it was called through jQuery, a simple window.onload call, or the default window.setTimeout method), you won't see any changes. You'll have to use an ng- event or angular's $timeout service.
To get something to run when your app starts, you can use module.run, as seen on this page.
https://docs.angularjs.org/guide/module
angular.module('MyMod', []).run(
//Your code here, like
updateName();
)};
Also, try reading up more on the lifecycle here:
http://onehungrymind.com/notes-on-angularjs-scope-life-cycle/
Here is the link to the code:
http://plnkr.co/edit/usrmiNkj5YJY5SlV8ETw?p=preview
Open up your javascript console and click on "say hi". It will trigger an error that $apply is already in progress.
But when you remove this piece of code:
ng-controller="mouseEvents" ng-mousedown="onMouseDown()" ng-mouseup="onMouseUp()" ng-mousemove="onMouseMove()"
and after saving when you click on "say hi" the error is gone.
How can I solve this?
I need the mouseEvents to set flags if the mouse is down or if it is up for multiple different controllers. I can not simply remove it in my code.
Edit:
Newer angular version solved my issue without $timeout v1.3.10 or higher
Use $timeout to let angular finish dirty checking then show the alert.
app.controller("demoController",function($scope,$window, $timeout){
$scope.save = function(){
$timeout(function(){
window.alert("hi!");
});
};
});
Plunkr: http://plnkr.co/edit/Kxbey5Rc43xsB9v5ugZ5?p=preview
I'm trying to "refactor" an example provided by the author of the ngInfiniteScroll in a not-OOP way. (http://binarymuse.github.io/ngInfiniteScroll/demo_async.html#)
Something is totally wrong in my code because the scrolling is not triggered.
A fix and explanation would be really appreciated.
This is my plunker code: http://plnkr.co/edit/hFHKhOvokL4ywGERExew?p=preview
In my controller, I was binding $scope.nextPage to the return value of the fetchServer service. Instead,I had to call the fetchServer function each time the page is scrolled, so $scope.nextPage should be a function:
$scope.nextPage = function() {
fetchServer(function(items){
$scope.items=items;
})
};
Here’s the updated Plunker: http://plnkr.co/edit/nKFrVoxjOB8JLqnis87B?p=preview