Develop Reference

angularjs ng-click not working on dynamic html elements

For some reason when using this function('testclickfn') as ng-click on dynamic elements, it doesn't invoke the function. Here is the angularjs file:
app.controller('testctrl',function($scope){
testfn($scope);
$scope.showelements = function(){
displayTestRows();
}
});
function testfn($scope){
$scope.testclickfn = function(){
alert('testing click fn');
};
}
function displayTestRows(){
for(var i=0; i < 5; i++){
$("#testdiv").append('<p ng-click="testclickfn()">click me</p><br>');
}
}
HTML page that calls angularjs controller 'testctrl':
<div id="testdiv" ng-controller="testctrl">
<button ng-click="showelements()">Show dynamic elements</button><br>
</div>
I'm assuming since the 'click me' tags are being generated after angular has loaded the page, it doesn't know of anything after page is generated so ng-click="testclickfn()" doesn't get registered with angularjs.
How do I get around this situation?

You're creating elements in a way angular has no idea about (pretty bad practice), but not to worry, you can let angular know!
Change the controller signature to
controller('testctrl', function($scope, $compile) {
Then run compile the new elements manually to get the ng-click directive activated
$scope.showelements = function(){
displayTestRows();
$compile($("#testdiv").contents())($scope);
}
If you cant tell, having to use jquery selectors inside your controller is bad, you should be using a directive and the link function to attach the element to the scope (ie, what if you have multiple testctrl elements?), but this'll get you running

As promised
The general rules are that no JS should be outside the angular functions, and that DOM manipulation, where appropriate should be handled by angular also.
Example 1: powerful
Have a look
<div ng-controller="ctrl">
<button ng-click="show('#here')">
create
</button>
<div id="here">
I'll create the clickables here.
</div>
</div>
use controllers for things that share stuff between a lot of different things
.controller('ctrl', ['$scope', '$compile', function($scope, $compile) {
$scope.sharedVariable = 'I am #';
$scope.show = function(where) {
where = $(where).html('');
//lets create a new directive, and even pass it a parameter!
for (var index = 0; index < 5; ++index)
$('<div>', {'test':index}).appendTo(where);
$compile(where.contents())($scope);
};
}])
use directives for non-unique elements that each have their own states
.directive('test', function() {
return {
//these too have their own controllers in case there are things they need to share with different things -inside them-
controller : ['$scope', function($scope) {
$scope.test = function() {
//see, no selectors, the scope already knows the element!
$scope.element.text(
//remember that parent controller? Just because we're in another one doesnt mean we lost the first!
$scope.$parent.sharedVariable +
$scope.index
);
}
}],
//no need to do things by hand, specify what each of these look like
template : '<p>click me</p>',
//the whole "angular way" thing. Basically no code should be outside angular functions.
//"how do I reference anything in the DOM, then?"; that's what the `link` is for: give the controller access using `scope`!
link : function(scope, element, attributes) {
//you can assign "ng-click" here, instead of putting it in the template
//not everything in angular has to be HTML
scope.element = $(element).click(scope.test);
//did you know you can accept parameters?
scope.index = Number.parseInt(attributes.test) + 1;
},
//just some set up, I'll let you look them up
replace : true,
restrict : 'A',
scope : {}
};
})
Example 2: Simple
But that is just a very generic and powerful way of doing things. It all depends on what you need to do. If this very simple example was indeed all you needed to do you can make a very simple, almost-all-html version:
<div ng-controller="ctrl">
<button ng-click="items = [1, 2, 3, 4, 5]">
create
</button>
<p ng-repeat="item in items" ng-click="test($event)">
<span>click me</span>
<span style="display:none">I am #{{item}}</span>
</p>
</div>
.controller('ctrl', ['$scope', function($scope) {
$scope.test = function($event) {
$($event.currentTarget).children().toggle();
};
}])
That's it, works the same almost

Understanding the working of ngClick and ngDblclick

I was trying to figure out how ngClick and ngDblclick work in angularjs. The problem is that even while clicking twice, instead of calling doubleclick function once. Angular calls click function twice and double click function once.
HTML:
<div ng-controller="MyCtrl">
<div class="button" ng-click="click()" ng-dblclick="dblclick()">
Click
</div>
<div class="button" ng-click="reset()">
Reset
</div>
<div>
clicked:{{clicked}}
</div>
<div>
double clicked : {{dblclicked}}
</div>
</div>
JS:
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.clicked = 0;
$scope.dblclicked = 0;
$scope.click = function(){
$scope.clicked++;
};
$scope.dblclick = function(){
$scope.dblclicked++;
};
$scope.reset = function(){
$scope.clicked = 0;
$scope.dblclicked = 0;
};
}
JsFiddle here
But this is not the case in jQuery wherein $(someElement).click() and $(someElement).dblclick() work as expected, which seems to be the ideal way to do it.
I have a fair idea that this is happening because they are implemented as directive in angular. Wherein in jQuery it works by listeners.
I see that you can eliminate this by using $evalAsync, but what reckons me is why we need such an extra burden to achieve something which is very obvious.
Can someone tell me how to handle the scenario. Thanks in advance.

perform function once element loaded - angular

I want to have an angular function fire after an element has displayed on the page.
The element is part of a SPA where what is displayed is controlled by a whole bunch of events (so doing things on page load won't work). The display of this element's parent (and therefore the element itself) is controlled by an ng-if which calls a separate function. As the parent doesn't display until that function has returned, there's no logical place to include the logic to alter this child element within that function, and since it's called by angular because of the ng-if, there's no parent function to place the code in once the previous function has returned.
I am currently achieving this by putting the function with my logic in it that always returns true within an ng-if on a child element of the element that has the proper, useful ng-if on it, as this will run as soon as the element has the option of being displayed. While this does work, I feel it's a very dodgy solution to the problem. Is there a more "proper" method of achieving this?
Snippet of the HTML (function names changed for the sake of the question):
<div data-ng-if="shouldTheButtonDisplay()">
<a class="btn"
data-ng-click="irrelevantToQuestion()"
data-ng-if="functionToPerformOnceElementLoaded()"
href="#">
button text
</a>
</div>
Snippet of JS (details changed because irrelevant to question):
$scope.shouldTheButtonDisplay() {
return booleanThatIsRelevantInContext;
}
$scope.functionToPerformOnceElementLoaded = function() {
// Edit state of button (technically an anchor)
var firstRowButton = document.querySelector("a.btn");
firstRowButton.style.background = "green";
return true;
}

I would have done so:
angular
.module('yourModuleName', [])
.controller('yourControllerName', yourControllerNameCtrl)
.directive('yourDirectiveName', yourDirectiveNameDirective);
yourControllerNameCtrl.$inject = ['$scope'];
function yourControllerNameCtrl($scope)
{
$scope.message = 'In controller';
$scope.irrelevantToQuestion = function() {};
}
function yourDirectiveNameDirective()
{
function doSomethingElse(scope)
{
scope.message = 'In directive';
}
return {
restrict: 'A',
scope: 'falsy',
link: function(scope, element)
{
element.find('a').addClass('green');
doSomethingElse(scope);
}
};
}
.btn {
background-color: red;
}
.btn.green {
background-color: green;
}
<html ng-app="yourModuleName">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
</head>
<body ng-controller="yourControllerName">
<div>{{ message }}</div>
<div your-directive-name>
<a class="btn"
data-ng-click="irrelevantToQuestion()"
href="#">
button text
</a>
</div>
</body>
</html>

AngularJS: Changing variable for an ng-switch using dynamically generated DOM

This is a little difficult to explain since I can't extract the code that I'm having the most difficulty with. The best I can do is a simple fiddle of what I'm trying to accomplish: https://jsfiddle.net/yLkukw5p/
HTML:
<div ng-app = "myApp" ng-controller = "parentController" ng-switch = "properties.selectedMethod">
<div ng-controller = "childController" ng-switch-when = "id">
<a ng-click = "survey()">
Change div
</a>
</div>
<div ng-switch-when = "date">
div changed
</div>
</div>
JS:
var app = angular.module('myApp', []);
app.factory('vars', function() {
var properties = {};
properties.selectedMethod = 'id';
function setselectedMethod(string){
properties.selectedMethod = string;
}
return {
properties : properties,
setselectedMethod : setselectedMethod
};
});
app.controller('parentController', function($scope, vars) {
$scope.properties = vars.properties;
$scope.setSearchMethod = function(method){
vars.setselectedMethod(method);
}
});
app.controller('childController', function($scope, $rootScope, $http, vars) {
$scope.properties = vars.properties;
$scope.survey = function() {
vars.setselectedMethod("date");
}
});
Basically, I want to be able to change the variable value in a factory shared between child and parent controllers. The only hiccup I'm running into is that in my case, the child div is dynamically generated, and that seems to be the only thing different between the fiddle and my code. I have some JavaScript that adds this DOM:
<div onclick = angular.element('#anotherdiv').scope().setSearchMethod('id');> More Info </div>
where anotherdiv is a div within the childController. When I click this div, I know by debugging that it runs the code in the vars factory, but it doesn't update other values? I'm using the "dot" trick so I would think the variables are references and not "shadowing" as some other posts suggested. Any thoughts?
EDIT: Updated the fiddle to be more accurate: https://jsfiddle.net/yLkukw5p/1/
It looks like the onclick function using angular.element is the one causing trouble, but I don't know how to work around it.

Is there a basic angular directive for read more/less Text

I've been looking into making an angular directive that would shorten a paragraph or a div if it has more than a certain number of characters(115 for example).
I haven't been able to find anything that will work for me, I've seen the http://dotdotdot.frebsite.nl/ and that has worked for some people but I am trying to make it using an angular directive and not JQuery.
If there's any help that someone can offer, it would be greatly appreciated, i am essentially tapped out of ideas.
The is the way my view is setup:
<div class="Description"
<div class="Content">
<div data-ng-bind-html="item.Description"></div>
</div>
I had originally made it work by just having it as jquery like so but it wasn't advisable to just jquery and angular
$(function () {
var maxHeight = 115;
var moretext = Localization.Shared.InstitutionProfileStrings.ShowMore();
var lesstext = Localization.Shared.InstitutionProfileStrings.ShowLess();
$('.__Description').each(function () {
var content = $(this).find(".__Content");
var anchor = $(this).find(".morelink");
if ($(content).height() > maxHeight) {
$(this).addClass("less");
$(anchor).html(moretext);
$(anchor).show();
}
else {
$(anchor).hide();
}
});
$(".morelink").click(function (e) {
e.preventDefault();
var parent = this.parentElement;
if ($(parent).hasClass("less")) {
$(parent).removeClass("less");
$(this).html(lesstext);
$(parent).addClass("more");
}
else if ($(parent).hasClass("more")) {
$(parent).removeClass("more");
$(this).html(moretext);
$(parent).addClass("less");
}
return false;
});
});

I think what you're looking for is ng-class. You can use it to add and remove classes based on a Boolean expression, which is basically what you are doing with your jQuery implementation. For example:
HTML:
<div ng-app="testapp" ng-controller="testctrl">
<div class="content" ng-class="{ less: hidden }">
Now is the time for all good men to come to the aid of the party.
Now is the time for all good men to come to the aid of the party.
Now is the time for all good men to come to the aid of the party.
Now is the time for all good men to come to the aid of the party.
</div>
<button ng-click="hidden = !hidden">{{hidden ? 'Show' : 'Hide'}}</button>
</div>
JS:
var app = angular.module('testapp', []);
app.controller('testctrl', function ($scope) {
$scope.hidden = true;
});
You can use a combination of ng-click and interpolation to modify the more/less link.
Here is a fiddle that shows it working: https://jsfiddle.net/8xjxaz28/

A quick google showed this package which would seem to fill your need for specific character limit truncation.
https://github.com/lorenooliveira/ng-text-truncate
NOTE: I did not write/use that directive so I can't speak to it working properly.

You can just use the limitTo filter if you want to simply cut the text off at a certain point(but not actually change the value of the string):
{{ fullString | limitTo: 115 }}