Angular event 'ng-click' binding issue - javascript

I am having problem with angular ng-Click.
My Controller
var ParentController = function ( ) {
this.MyEvent = function () {
alert('foo-bar');
};
this.AddHTML= function () {
$("#ButtonSec").html('<input type='button' ng-click='Parent.MyEvent()' value='inner button'/>');
};
};
angular.module('myApp', []).controller('ParentController', ParentController);
HTML - 1 (Works as expected button ng-click binds to 'inner button' as expected):
<div ng-app='testComponent'>
<div id="content" ng-controller="ParentController as Parent">
<div id="ButtonSec">
<input type='button' ng-click='Parent.MyEvent()' value='inner button'/>
</div>
</div>
</div>
HTML-2 (Not working):When rendering html using Add HTML button. Event not binding to inner button as it should (important thing I can't use $scope as per client requirement)
<div ng-app='testComponent'>
<div id="content" ng-controller="ParentController as Parent">
<div id="ButtonSec">
</div>
<input type='button' ng-click='Parent.AddHTML()' value='Add HTML'/>
</div>
</div>

I'd suggest you to use ng-if directive which will add or remove html on the Expression which we will provide to it. To showing hiding that div you need to maintain one variable inside your controller context that will be responsible for showing that div on html.
Html
<div ng-app='testComponent'>
<div id="content" ng-controller="ParentController as Parent">
<div ng-if="Parent.showContent" id="ButtonSec">
<input type='button' ng-click='Parent.MyEvent()' value='inner button'/>
</div>
<input type='button' ng-click='Parent.showContent = true' value='Add HTML'/>
</div>
</div>

Not sure why you don't want to use $scope because angular manage $scope eventually internally. This is hack way using $rootScope
var ParentController = function ($compile,$rootScope ) {
this.MyEvent = function () {
alert('foo-bar');
};
this.AddHTML= function () {
$("#ButtonSec").html($compile("<input type='button' ng-click='Parent.MyEvent()' value='inner button'/>")($rootScope.$$childHead));
};
};

Related

Insert HTML with AngularJS code inside

any help about who insert html with Angular code inside the html string.
Example:
<div class="container">
<span class='btn' onclick="javascript: clicklink()">click here</span>
<div name="content" id="content">
</div>
</div>
<script>
function clicklink(){
$("#content").html("<span class='label label-danger'>Invoice</span>"+
" <div ng-app ng-init='qty=1;cost=2'> <b>Total:</b> {{qty * cost | currency}} </div>");
}
</script>
Example click here
If you're looking for a 'Hello World' kind of example, this is probably as basic as it gets.
https://code-maven.com/hello-world-with-angular-controller
Maybe the example doesn't make sense, but here is the thing maybe exist another way to do that. I have a project with c# MVC and for render some Views I use ajax
Javascript to load modal into View:
function Edit(){
$.ajax({
url: '../Controller_/Action_',
type: 'POST',
datatype: "html",
traditional: true,
data: { data1: data1 },
success: function (result) {
$('._container').html(result);
},
error: function (result) { }
});
}
MVC c# code:
public ActionResult Edit()
{
...\ code \...
return PartialView("/View/_Edit", model);
}
View Main:
Open Modal
<div name="_container">
<!-- Here load body of modal -->
</div>
Partial view (Edit) return by Action (Edit) in Controller . Should be a modal structure:
<div name="_editModal">
#html.LabelFor( x => x.Name)
#html.EditorFor( x => x.Name)
<div ng-app ng-init="qty=1;cost=2">
<b>Invoice:</b>
<div>
Quantity: <input type="number" min="0" ng-model="qty">
</div>
<div>
Costs: <input type="number" min="0" ng-model="cost">
</div>
<div>
<b>Total:</b> {{qty * cost | currency}}
</div>
</div>
</div>
As already stated by a bunch of people in the comments and other answers this is absolutely bad practice. But there is also a built-in option to solve your problem with pure AngularJS using $compile.
In order to make that work you need to place everything inside a controller or directive and inject the $compile service accordingly.
You need to use the $compile service to produce a function of your dynamic HTML markup which is able to consume a scope object as a parameter in order to produce a working AngularJS template.
After inserting your template, you need to trigger the AngularJS digest cycle using $apply.
<div class="container" ng-controller="MyController">
<span class='btn' ng-click="clicklink()"">click here</span>
<div name="content" id="content">
</div>
</div>
<script>
app.controller("MyController", function($scope, $compile) {
var template = "<button ng-click='doSomething()'>{{label}}</button>";
$scope.clicklink = function(){
$scope.apply(function(){
var content = $compile(template)($scope);
$("#content").append(content);
});
}
});
</script>

Check if div is hidden in AngularJS from controller?

I have a div that I am hiding/showing using angular in my HTML, but I want to know how to check if it is currently hidden or not in my controller.
Any solutions I have found so far are jQuery based using 'hasClass' to find ng-hide, but I don't want to use jQuery.
My div looks like this
<div class="item item-input" ng-show="showDetails"></div>
<button class="button button-block button-light leftTextButton"
ng-click="showDetails = ! showDetails; updateTimes()">
<i ng-class="{'icon icon ion-minus-round': showDetails,
'icon icon ion-plus-round': !showDetails}"></i> End Time</button>
I thought from my controller I could just call if($scope.showDetails) and that would return true or false, but it is undefined.
How can I check if a div if hidden or showing from my controller? Thanks
I'm guessing you are having a scoping issue. Passing it to the function that will check it is the best bet. Otherwise if it is in scope the controller should be able to access it.
angular.module('MyApp', [])
.controller('MyController', ['$scope',
function($scope) {
$scope.myBoolean = false;
$scope.checkMyBooleanOnScope = function() {
alert($scope.myBoolean);
};
$scope.checkMyOtherBooleanOnScope = function() {
alert($scope.myOtherBoolean);
};
$scope.checkBooleanByPassingIt = function(bool) {
alert(bool);
};
}
]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="MyApp" ng-controller="MyController">
<p>myBoolean predefined in the controller:{{myBoolean}}
<input type="checkbox" ng-model="myBoolean" />
</p>
<p>
<button ng-click="checkMyBooleanOnScope()">checkMyOtherBooleanOnScope</button>
<button ng-click="checkBooleanByPassingIt(myBoolean)">checkMyBooleanByPassingIt</button>
</p>
<p>myOtherBoolean defined on the page with ng-model:{{myOtherBoolean}}
<input type="checkbox" ng-model="myOtherBoolean" />
</p>
<p>
<button ng-click="checkMyOtherBooleanOnScope()">checkMyBooleanOnScope</button>
<button ng-click="checkBooleanByPassingIt(myOtherBoolean)">checkMyOtherBooleanByPassingIt</button>
</p>
</div>

how to assign array element value to ng-click in angular js

In my program I have an Array which consists of header name and function name.
I am using ng-repeat in a div which consists of a span tag. I want to add different functionality for each iterated span so I stored function name in array.
my html code is:
<div ng-repeat="header in header" ng-init="head=header">
<h4 class="headers">{{ header.name}}</h4>
<div class="arrow-up" ng-show={{ header.arrowup}} ng-click={{header.close}}> </div>
</div>
my angular code is:
$scope.header=[{"name":"Subsection Header #1","arrowup":"arrowup","close":"close()"}];
$scope.close = function() {
console.log(hello);
};
I want to assign close() to the ng-click and arrowup to ng-show. How can I assign them to ng-click and ng-show
change:
<div class="arrow-up" ng-show={{ header.arrowup}} ng-click={{header.close}}>
To:
<div class="arrow-up" ng-show="header.arrowup" ng-click="this[header.close]()">
<button>
CLOSE ME
</button>
</div>
DEMO= http://jsfiddle.net/Lvc0u55v/1788/
ng-click is the problem as i see,
<div class="arrow-up" ng-show="header.arrowup" ng-click="header.close"></div>
we need not give {{}} to ng-click and ng-show.
hope it helps.
First you need to pass a real functions to array:
function arrowUp(){
// ng-show needs to receive true or false
return true;
}
function close(){
// do something here
}
$scope.headers=[{"name":"Subsection Header #1","arrowup":arrowUp,"close":close}];
The bind them in a view:
<div ng-repeat="header in headers">
<h4 class="header">{{ header.name}}</h4>
<div class="arrow-up" ng-show="header.arrowup()" ng-click="header.close()"> </div>
</div>
You need to use the $eval method, you can read more about it here
$scope.$eval Executes the expression on the current scope and returns the result. Any exceptions in the expression are propagated (uncaught). This is useful when evaluating Angular expressions
HTML:
<div ng-controller="TestController">
<div ng-repeat="header in headers">
<h4>{{ header.name}}</h4>
<button type="button" ng-click="onExecuteFunctionFromString(header.close)">Click Here</button>
</div>
</div>
JS:
var myApp = angular.module('myApp', []);
myApp.controller('TestController', ['$scope', function($scope) {
$scope.headers = [{
"name": "Subsection Header #1",
"arrowup": "arrowup",
"close": "close()"
}];
$scope.close = function() {
console.log('hello');
};
$scope.onExecuteFunctionFromString = function(stringFunction) {
$scope.$eval(stringFunction)
};
}]);
Please see working example here

How to populate a HTML div on click event using Angularjs

What is the best way of populate a div (or ng-include) with a ready .html template using anuglarjs, not using ng-view and routing?
for ex:
<div>
<ng-include src="" />
</div>
<input type="button" ng-click="getTemplate()" value="Get template" />
$scope.getTemplate = function() {
//Get and..populate template here
}
Using ng-show/ng-hide/ng-if
<div ng-controller="TodoCtrl">
<div ng-show="show">Hello</div>
<button ng-click="showHide()">Boom</button>
</div>
function TodoCtrl($scope) {
$scope.show = true;
$scope.showHide = function(){
$scope.show = !$scope.show
}
}
fiddle
Difference between ngShow/ngHide & ngIf - ng-if will remove elements from DOM. This means that all your handlers or anything else attached to those elements will be lost. ng-show/ng-hide does not remove the elements from DOM. It uses CSS styles to hide/show elements, also ng-if creates a child scope while ng-show/ng-hide does not
Thanks
Use ng-if or ng-show:
<div ng-if="templateVisible">
<ng-include src="" />
</div>
<input type="button" ng-click="getTemplate()" value="Get template" />
$scope.getTemplate = function() {
$scope.templateVisible = true;
}
And using ng-show:
<div ng-show="templateVisible">
<ng-include src="" />
</div>
<input type="button" ng-click="getTemplate()" value="Get template" />
$scope.getTemplate = function() {
$scope.templateVisible = true;
}
The difference between the two is that ng-if doesn't populate the DOM, when the condition is false, while ng-show does, but marks it as display: none.

unbind ng-click dynamically from element : angularjs

i have an element which have ng-click event and on clicking it adds a div that works fine. what i want is to remove ng-click after adding the div .
one way is to use ng-if
<div ng-click="addDiv()" ng-if="!divAdded" >
<span>i add a div</span>
</div>
<div class="disabled" ng-if="divAdded" >
<span>i add a div</span>
</div>
for this i have to add multiple div for single element that works on and off.
is there any way to unbind click event like we do in jquery dynamically?
any help will be appreciated
You can also do this:
<div ng-click="divAdded || addDiv()" >
<span>i add a div</span>
</div>
This will prevent ng-click from calling addDiv() if divAdded is true
Put that logic into the controller, not into the view
Controller:
(function(){
function divAddController() {
var self = this;
self.divAdded = false;
self.addDiv = function() {
if(!divAdded) {
//Add div here
self.divAdded = true;
}
}
}
angular.module("example")
.controller("divAddController", divAddController);
})();
View:
<div ng-controller="divAddController as divAdder">
<div ng-click="divAdder.addDiv()" ng-class="{disabled: divAdder.divAdded}">
<span>i add a div</span>
</div>
</div>
You can do it in a more easy way like this:
var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', function($scope) {
$scope.showDiv = false;
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<button ng-click="showDiv = true;">I show the div</button>
<div ng-if="showDiv">I am visible!</div>
</div>

Categories