ng-click is not working - AngularJs

Question

I have checked all the solutions available here, but it didn't help me.

I am trying to display a button from AngularJs to html, but ng-click is not working for <a> or <button> tags. I am working in Eclipse and it contains many built in modules. Please help me out. Below is the sample code:

   <!DOCTYPE html>
<html>
<head>
    <script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-controller="contrl">
<a href="" ng-click="testFunc1()">Link1</a>
<div id="id1">Text1</div>
<p id="id2">Text2</p>
</div>

<script>
    function contrl($scope,$http,$location){
            xyz = '<button type="submit" ng-click="testFunc2()">Link2</button>';
            document.getElementById("id1").innerHTML = xyz;

            $scope.testFunc1 = function() {
            document.getElementById("id2").innerHTML = "abc";
            };
            $scope.testFunc2 = function() {
            document.getElementById("id2").innerHTML = "xyz";
            };
    }
</script>
</body>
</html>

Only ng-click attribute is not working when I pass it through angularJs. Even href attribute is working in the same case. As i am using Eclipse all the required modules are already setup in different files. I was working with angularJs from two weeks and everything was working except when I faced this issue.

I agree with @JsIsAwesome. You haven't actually set up the Angular app or controller properly. Have a look at https://docs.angularjs.org/guide/controller — Ben Drury, Mar 08 '15 at 07:00
Yes. This will not work unless you have angular app set up properly. I don't see where you are loading the Angular min files and all? — Sanjeev Singh, Mar 08 '15 at 07:06
I have included the angular min file in my example. I was using it but missed to copy it here. Anyhow the result is same, ng-click is not working. — Prash, Mar 09 '15 at 03:35
why are you bothering with `document.getElementById` instead of using Angular 2 way binding? — Claies, Mar 09 '15 at 03:41
I tried using {{id3}} and $scope.id3 way, but it was directly printing whole html code in the web page. Any pointers to other ways would be helpful. — Prash, Mar 09 '15 at 03:55
printing whole html code? huh? can you show an example of how you used angular binding expressions, and the result you received? — Claies, Mar 09 '15 at 04:12

score 0 · Answer 1 · answered Mar 08 '15 at 07:13

0

Not entirely sure what you're up to, but something like this will work better:

<!DOCTYPE html>
<html>
<body>
<div ng-app="myApp" ng-controller="contrl">
<p><a href="" ng-click="testFunc1()">Link1</a></p>
<div id="id1">{{ val1 }}</div>
<p id="id2">{{ val2 }}</p>
</div>

<script>
  var myApp = angular.module('myApp',[]);

  myApp.controller('contrl', ['$scope', '$http', '$location', function($scope, $http, $location) {

      $scope.val1 = "text1";
      $scope.val2 = "text2";

      $scope.testFunc1 = function(){
            $scope.val1 = 'New Value';              
      }

      $scope.testFunc2 = function(){      
            $scope.val2 = 'Second New Value';                         
      };
  }]);

</script>
</body>
</html>

answered Mar 08 '15 at 07:13

Ben Drury

1,356
2
16
34

Obviously you will need to include calls to get the angular libraries in! – Ben Drury Mar 08 '15 at 07:15
My task is to send a button or anchor tag with ng-click attribute from angularJs to html. Your example will not solve my purpose. – Prash Mar 09 '15 at 03:37
Yup, but why? What are trying to achieve? Can you use an angular variable to show/hide dom elements with ng-show, rather than pushing HTML into the dom from angular? – Ben Drury Mar 09 '15 at 04:44
My requirement is to display 'n' number of links (anchor or button tags), where i will fetch 'n' from database. As 'n' is not a definite number, i cannot define a particular number of links in html. So to start with i was trying to print at least one link in this way. – Prash Mar 09 '15 at 04:48

Nielarshi · Accepted Answer · 2015-03-08T07:34:30.020

0

Your code is the most basic approach someone would follow.Its not wrong, only problem is you seem to be using newer version of angular for development or you have forgot to include any.

Your application development pattern is not supported by the recent released versions of angular.

I have used till 1.2.26, it works.

Check demo here

You have also used innerHTML, as well document.getElementById.

These are not at all required. Read more about bindings and other best parts of angular.

edited Mar 08 '15 at 07:34

answered Mar 08 '15 at 07:28

Nielarshi

1,126
7
11

In your demo, you have given ng-click="testFunc2()" for div element too. Hence it was working. Once i remove ng-click from div it wont work. – Prash Mar 09 '15 at 03:16

score 0 · Answer 3 · edited May 23 '17 at 12:31

that's because angular doesn't know about the ng-click you bring in with plain javascript. so if you want to do it in the html, you can write your script like this:

    function contrl($scope){


        $scope.text = 'text2';
        $scope.testFunc1 = function() {
            $scope.text = "abc";
        };
        $scope.testFunc2 = function() {
            $scope.text = "xyz";
        };
};

if you still want to insert the html from the script then have a look here: AngularJS : Insert HTML into view

ng-click is not working - AngularJs

3 Answers3