We Keep Coding

ng-if not working with simple javascript

ng-if is not working when I change the values through simple javascript function.My function is getting called but the changes in values cannot be seen in view. Please refer below code.
HTML
<div id="span" ng-app='MyModule' ng-cloak ng-controller="MyController">
<div ng-if="!bool">
This is for true
</div>
<div ng-if="bool">
This is False
</div>
{{bool}}
<br>
<input type="submit" ng-click = "myfunction('test')" value="ng-if button">
</div>
<input type="submit" onClick = "check1()" value="simple JS button">
JS
angular.module('MyModule', [])
.controller('MyController', function ($scope) {
$scope.bool = true;
$scope.myfunction = function (data) {
$scope.bool = !$scope.bool;
};
});
function check1() {
angular.element(document.getElementById('span')).scope().myfunction('test');
}
When I use ng-click button it changes value of bool changes, but same doesn't happens with simple JS button . Actually I am implementing Angular in a page that already uses jQuery, so I need to use simple JS button.
JS Fiddle : JS Fiddle

At first, ng-click is able to parse an angular expression.
Second, it handles the reference to the current scope and performs a call to $scope.$apply to notify any watchers to update. If you would add a call to angular.element(document.getElementById('span')).scope().$apply() in your function, it should work as expected.

Use $scope.apply . This is because angulars digest cycle will not know if your value changes outside of its scope like in a simple JS function.

ng-click not firing anything at all

I'm having what seems to be a rather simple problem in my first full Angular application. I have some code:
<div class="button-bar bar-dark" ng-controller="FeedController">
<a class="button" onclick="console.log('..');" ng-click="console.log('...');">Click Me</a>
</div>
At first I thought I was having an issue with $scope, and EVERY single question related to ng-click I found on SO about it not firing leads back to that, but as you can see from the above code (after I changed from my function to a simple console.log), my issue is simpler - ng-click just doesn't do anything. There's no error. The onclick fires, but ng-click does not.
What's weirdest is that in that same page, I have the following that DOES work:
<div class="list" id="rssnews" ng-controller="FeedController">
<a ng-click="doSomething('{{entry.link}}')">
<span ng-bind-html="entry.content"></span></a>
</div>

Try calling functions in both events, the following works for me:
<a class="button" onclick="nativeFn()" ng-click="ngFn()">Click Me</a>
Declare the one function in the same file
function nativeFn() {
alert("nativeFn is triggered!");
};
and the other one in your controller
function MyCtrl($scope) {
$scope.ngFn = function () {
alert("ngFn is triggered!");
};
}

Can't make jQuery callbacks to work properly while calling same function repeatedly

I have a simple share button aside every post, I'm using .toggle() function to show and hide the options. The code looks something like this:
<div id="posts">
<div class="post">
<div class="content">
Post content
</div>
<div class="share">
<div class="trigger"> Share </div>
<div class="hidden"> Share on Facebook </div>
<div class="hidden"> Share on Twitter </div>
</div>
</div><!-- each post -->
<div id="new">
</div><!-- new post container -->
</div><!-- Posts -->
<script>
function shareThis(){
$('.trigger').click(function(){
$(this).siblings().toggle();
});
}
$(document).ready(function(){
shareThis();
$('#new').load("/post2", function(){
shareThis();
});
});
</script>
I call this function once when the page loads, and then every time a new post is loaded.
The problem is, it works in the first time when the page is loaded, and just works for the new element when a new post is loaded. I also tried this with 'each' function but same result.
So it's just working for the last call, similar to these question i found here and here, and some others, but didn't get a solution for my problem there.
Thanks!

The problem is, it works in the first time when the page is loaded, and just works for the new element when a new post is loaded.
Your issue could be that you are binding the event twice (or as many number of times you load #new contents) to the existing .trigger by calling shareThis inside the load callback. So basically when you click on the old .trigger it will trigger the handler twice, i.e toggling it twice which keeps them in the same state. SO either bind the event to the newly added ones alone or turn the click event off and turn it on in the function shareThis:
function shareThis(){
$('.trigger').off('click').on('click', function(){
$(this).siblings().toggle();
});
}
You could also try:
function shareThis(ctx){
ctx = ctx || document;
$('.trigger', ctx).click(function(){
$(this).siblings().toggle();
});
}
$(document).ready(function(){
shareThis();
$('#new').load("/post2", function(){
shareThis(this);
});
});

Try binding the click to the document instead. Only need to do it once :)
$(document).on('click', '.trigger', function () {
$(this).siblings().toggle();
}).ready(function () {
$('#new').load("/post2");
});
http://api.jquery.com/on/
http://training.bocoup.com/screencasts/more-efficient-event-handlers/

add ng-click to a div that was added using ng-bind-html

I have a div that is created in javascript using angularjs. Here it is
Js:
$scope.myHTML=$sce.trustAsHtml('<div
ng-app="mainModule"
ng-controller="mainCtrl"
ng-click="updateText()"
class="squareButton ng-scope"> </div>");
html:
<div ng-controller="mainCtrl" ng-bind-html="myHTML" class="screenDiv"></div>
The problem is that when i click on the div it does not call my updateText() method
$scope.updateText = function()
{
alert("worked");
}
The div does show up. the update method is in the mainCtrl controller.
the ng-click doesnt work what did i do wrong or is this just not supported yet.
Heres the page if it helps http://stevenjohnston.ca/ all of the squares "should" popup the alert but it doesnt.

When you write something in your Html which is not known to Html and you want the angular to know those syntax like 'ng-click' you must compile it through the $compiler service. Otherwise it will be treated as a plain string by the angularj as well as the Html.
Use the following code.
function htmlGeneratorController($scope, $compile, $sce){
$scope.myHTML=$compile($sce.trustAsHtml('<div ng-app="mainModule" ng-controller="mainCtrl" ng-click="updateText()" class="squareButton ng-scope"> </div>'))($scope);
}
Hope this will help :)

Is there any particular reason for binding HTML to every square?
It would be easier to just use some grid or table and bind ng-click to each cell.
So you can move controlle outside div
<body ng-controller="mainCtrl">
<!-- Create Table or Grid .Inside each cell add-->
<div ng-click="updateText()"></div>
</body>

Scope not updating on click

This is my html
<div ng-controller="data">
<div class="main">
<div>{{name}}</div>
<div custom-tag>click</div>
</div></br>
<div class="main">
<div>{{name}}</div>
<div custom-tag>click</div>
</div></br>
<div class="main">
<div>{{name}}</div>
<div custom-tag>click</div>
</div>
</div>
When i click on particular div (click div) , I want to chage the name into above div of the particular clicked div .
This is my controller
app.controller('data',function($scope)
{
$scope.name="john"
});
So when I load my html page it will be shown like this
John
click
john
click
john
click
When I click on first click , I have to change name to britto so out put should be like this
Britto
click
john
click
john
click
This is my directive i have tried like this. When I click on div I am getting alert message that clicked . But scope is not changed the name
app.directive('customTag',function()
{
return function(scope, element, attrs)
{
element.bind('click',function()
{
alert("clicked");
scope.name="britto"
});
}
});

You need to tell the scope that you made changes, seeing as you're updating the scope outside of angular.
Like this.
element.bind('click',function(){
alert("clicked");
scope.name = "britto"
scope.$apply();
});
You can also do this.
element.bind('click',function(){
alert("clicked");
scope.$apply(function() {
scope.name = "britto"
});
});
I'm not entirely sure what the difference is...
A good way to help remember this is to remember that any function that is not called by angular.js and is out of the program flow you need to use scope.$apply(); whenever making changes to the scope, so click would be out of the flow because it can be triggered at any time.

Quick answer: You have to call scope.$apply() after you change the scope, as the "click" isn't "angular-aware".
It'll work, but there are much better way to do what you're after:
A. Use ng-click, and skip the directive
<div>{{name}}</div>
<div ng-click="changeName()">click</div>
Then add to your controller:
$scope.changeName = function(){ $scope.name="britto"; }
B. Directives and scopes: You should really take the time and read through this documentation page
You can jump directly to: "Isolating the Scope of a Directive" section
---- (EDIT) ----
C. Using ng-repeat
controller:
$scope.names = ["john","michael","jack"];
html:
<div ng-controller="data">
<div class="main" ng-repeat="name in names">
<div>{{name}}</div>
<div ng-click="name='britto'">click</div>
<br/>
</div>
</div>
See this plunkr