简体   繁体   English

ng-click不起作用-AngularJs

[英]ng-click is not working - AngularJs

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. 我正在尝试显示从AngularJs到html的按钮,但是ng-click对于<a><button>标记不起作用。 I am working in Eclipse and it contains many built in modules. 我正在Eclipse中工作,它包含许多内置模块。 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. 通过AngularJs时,只有ng-click属性不起作用。 Even href attribute is working in the same case. 甚至href属性在相同情况下也起作用。 As i am using Eclipse all the required modules are already setup in different files. 当我使用Eclipse时,所有必需的模块已经在不同的文件中设置了。 I was working with angularJs from two weeks and everything was working except when I faced this issue. 我从两个星期开始使用angularJs,除了遇到这个问题时,其他所有东西都在工作。

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>

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. 没错,唯一的问题是您似乎正在使用更新版本的angular进行开发,或者您忘记了包含任何新版本。

Your application development pattern is not supported by the recent released versions of angular. 最近发布的angular版本不支持您的应用程序开发模式。

I have used till 1.2.26, it works. 我一直用到1.2.26,它有效。

Check demo here 在此处查看演示

You have also used innerHTML, as well document.getElementById. 您还使用了innerHTML以及document.getElementById。

These are not at all required. 这些都不是必需的。 Read more about bindings and other best parts of angular. 阅读更多有关装订和其他最佳角度部件的信息。

that's because angular doesn't know about the ng-click you bring in with plain javascript. 那是因为angular不了解您使用普通javascript带来的ng-click。 so if you want to do it in the html, you can write your script like this: 因此,如果要在html中执行此操作,则可以这样编写脚本:

    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 如果您仍然想从脚本中插入html,请在此处查看: AngularJS:将HTML插入视图

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM