We Keep Coding

code working in chrome console but not in page

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

Changing controller variable from directive and passing it to ng-show - Angular JS

I need to change a controller variable from a directive and then pass its updated value to ng-show. Please see my code below:
Controller:
self.menuVisible = false;
Directive:
icon.bind('click', function(){
scope.menuCtrl.menuVisible = true;
})
NOTE: there are lot more code lines in the directive which are not relevant to the question, and this is the reason why I use directive instead of controller function which I could pass with ng-click.
View:
<div class="menu-item" ng-show="menuCtrl.menuVisible"></div>
<div class="icon" my-directive></div>
Although nothing visible happens on the element click, when I check the menuCtrl.menuVisible in devtools it returns true after the action.
Could you please explain what I am doing wrong?
Thanks in advance!

Most likely you're not updating your variable inside $digest loop, try like this:
icon.bind('click', function(){
$scope.$apply(function() {
scope.menuCtrl.menuVisible = true;
}
})

Trigger ngf-select programmatically

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.

Angular directive breaks scope?

First off, I'm new to Angular, and realize that I may be missing a core concept...
Consider the jsfiddle: http://jsfiddle.net/D4dFv/
I'd like to be able to click on each link, and see the {{driveState.currentView}} update in the DOM.
Everything works fine until I add in a directive that helps me detect when all images on the page have loaded successfully. With that directive in place, the binding appears to break, and you can no longer click on each link and see driveState.currentView update.
Why is this?
To test this in the jsfiddle, note that the following works fine:
<img width='10' height='10' src='http://www.w3schools.com/images/pulpit.jpg'>
...and this breaks the data binding somehow:
<img imageonload width='10' height='10' src='http://www.w3schools.com/images/pulpit.jpg'>
Thanks in advance.

The reason is that the Directive is defining its own controller. This makes a new instance of the controller class and is somehow messing up the scope.
To fix, take out the controller: 'Ctrl', in the Directive definition.
Here is the new Directive code:
myApp.directive('imageonload', function () {
return {
restrict: 'A',
link: function ($scope, element) {
element.bind('load', function () {
_viewsLoaded++;
if (_viewsLoaded === $scope.appViews.length) {
alert('init layout here');
}
});
}
};
});
And an updated fiddle for you.

set angular-ui-tinymce editor content after navigation

I'm using angular-ui-tinymce (latest version 0.0.4, https://github.com/angular-ui/ui-tinymce/blob/master/src/tinymce.js).
I've encountered a problem I cannot solve.
On the first page load, content is loaded to the editor via ng-model.
Then I navigate to another state and then navigating back to state with the editor.
The value still exists on the scope (I've checked it) but the content doesn't appear in the editor for some reason I cant figure..
This is the the textarea with the directive as attribute:
<textarea rows="10" class="form-control" id="desc" ui-tinymce ng-model="valueFromScope"></textarea>
This changes happened after updating AngularJS from 1.5 to 1.2.1.
I thought it had something to do with ngSanitize but I'm not sure..
btw angular-sanitize and ngSanitize are included in the app.
Any advice?
update
It seems like ngModel.$render is not doing anything.
ngModel.$render = function() {
console.log(ngModel);
tinyInstance = tinymce.get(attrs.id);
if (tinyInstance) {
tinyInstance.setContent(ngModel.$viewValue || '');
updateView();
}
};
Nothing is printed out, not even undefined, this means ngModel.$render doesn't even run.
Any reasons for that?
Update
I don't think model.$render is related, from what I understand $render only executes on a programmatic change like actually editing the text and that works..
I still can't figure it out, sometimes the value is shown and sometimes not.

Problem Solved! - for now..
Thanks to #alonisser I've found a solution.
From what I understand, the problem is occurring because something has changed in the prioritizing of angularjs directives.
read the following:
http://iwang.github.io/html/angular/angularjs/2013/11/04/ngmodel-render-cannot-be-overriden-in-angular-rc3.html
the simple fix is just to add priority definition to the directive
return {
priority: 10,
require: 'ngModel',

Setting the priority doesn't really solve the problem.
The only thing that worked for me was adding the following code before the ngModel.$render = function()
var stopWatch = scope.$watch(attrs.ngModel, function(newValue){
if (!tinyInstance){
tinyInstance = tinymce.get(attrs.id);
}
if (tinyInstance) {
tinyInstance.setContent(newValue);
stopWatch();
}
});