Question

使用angular.js和jquery克隆相同的select标签后，我无法调用ng-change事件。我正在解释下面的代码。

的index.html：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>clone</title>
<link rel="shortcut icon" href="img/favicon.png" type="image/x-icon">
        <link rel="apple-touch-icon" href="img/apple_icons_57x57.png">
        <link rel="apple-touch-icon" sizes="72x72" href="img/apple_icons_72x72.png">
        <link rel="apple-touch-icon" sizes="114x114" href="img/apple_icons_114x114.png">
        <!--/ metas -->

        <!-- styles -->
        <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
        <link rel="stylesheet" type="text/css" href="css/layerslider.css">
        <link rel="stylesheet" type="text/css" href="css/fullwidth/skin.css">
        <link rel="stylesheet" type="text/css" href="css/font-awesome.css">
        <link rel="stylesheet" type="text/css" href="css/owl.carousel.css">
        <link rel="stylesheet" type="text/css" href="css/jquery.fancybox.css">
        <link rel="stylesheet" type="text/css" href="css/styles.css">
        <link rel="stylesheet" type="text/css" href="css/color-blue.css">
        <link rel="stylesheet" type="text/css" href="css/intlTelInput.css">
</head>

<body ng-controller="myController">
 <div class="col-md-6 bmargindiv1">
     <label for="gender" accesskey="G"><span class="required">*</span> Gender</label>
     <ol id="expOl">
      <li>
      <select name="gender" id="gender" ng-change="change()" ng-model="confirmed" >
       <option value="male" selected>Male</option>
        <option value="female">Female</option>
                 </select>
                 </li>
                </ol>
                 <div class='col-md-2 padding-zero bmargindiv1'><button type='button' class='btn btn-success btn-sm expAdd' id='Expadd'>+</button></div>
 </div>
 <script type="text/javascript" src="js/jquery.min.js"></script>
 <script src="js/angular.min.js" type="text/javascript"></script>
 <script>
 $(document).ready(function () {
      $(document).on('click','.btn-success', function () {
           $('#expOl').append('<li><select name="gender" id="gender" ng-change="change()" ng-model="confirmed"><option value="male" selected>Male</option><option value="female">Female</option></select></li>');
      });
 });
 </script>
 <script>
 var module=angular.module('myApp',[]);
 module.controller('myController',function($scope){   
   $scope.change=function(){
       alert('hello');
   }
 });
 </script>
</body>
</html>

第一次它工作正常，但是当我在点击+按钮后创建另一个选择标记时，此克隆选择标记中的ng-change事件无效。请帮我解决此问题。

Answer 1

首先，我建议不要混合使用jquery概念和角度概念。 Angular使用jquery的一个子集，但是一旦你开始在jquery而不是Angular中设置事件监听器这样的事情，你最终会遇到范围和监听/观察者问题。

如果你在Angular更新循环之外进行更新（即$ digest循环），你至少需要使用compile或apply，就像直接在jquery中一样。但最简单的解决方法是删除所有直接jquery引用并设置事件侦听器并在控制器中单击事件，或直接在Angular范围内的元素上。

自定义指令是动态添加HTML内容的简便方法： https://docs.angularjs.org/guide/directive

有关 $ compile 和 $摘要周期的信息： https://docs.angularjs.org/api/ng/service/$compile

使用angular.js克隆相同的选择标记后，ng-change事件无法正常工作

1 个答案: