成语| 古诗大全| 扒知识| 扒知识繁体

当前位置：首页 > 趣味生活

angular动态添加元素并取值

  • Q1:AngularJS中,如何给动态生成的元素绑定事件
  • Q2:angular 通过div动态添加的元素，怎么获取ng-bind
  • Q3:angularjs 怎么动态添加一个有directive的元素
  • Q4:angular应该怎样去动态添加删除元素

    • Q1：AngularJS中,如何给动态生成的元素绑定事件

    目的 : AngularJS实现给动态生成的元素绑定事件

    工具 : AngularJS

    思路及解决步奏:

    1 . 我们知道在jQuery中，动态生成一个元素，如果要在动态生成元素的同时，动态绑定事件，可以通过live/on方法（在jquery3.0中已经废除了bind方法）。

    2 . 在AngularJS中，操作DOM一般在指令中完成，事件监听机制是在对于已经静态生成的dom绑定事件，而如果在指令中动态生成了DOM节点，动态生成的节点不会被JS事件监听。

    举例来说：

    123456789angular.module(myapp,[]).directive(myText,function(){return{restrict:A,template:Hieveryone
    ,link:function(scope,ele,attr){}}})

    这个指令中，会生成新的DOM节点：

    1Hieveryone

    但是如果不做处理，这里的ng-click事件并不能实现，因为事件的监听在静态html页面生成时候已经完成。那么如何给动态生成的元素，绑定事件，实现事件的动态监听呢？

    3 . 通过$compile服务，编译DOM，实现动态的事件绑定

    12vartemplate:Hieveryone
    ,varcontent=$compile(template)(scope);

    通过这两句，首先先编译DOM，然后用编译后的DOM加入到之前的静态节点中，就能实现动态绑定事件，之类注意，应该注入$compile service

    1.directive(myText,function($compile){})

    完整的代码如下：

    123456789101112131415angular.module(myapp,[]).directive(myText,function($compile){vartemplate:Hieveryone
    ,return{restrict:A,link:function(scope,ele,attr){ele.on("click",function(){scope.$apply(function(){varcontent=$compile(template)(scope);element.append(content);})});}}})

    另外一个栗子:

    12345678910111213varmyApp=angular.module(myApp,[]);myApp.controller(MainCtrl,[$scope,$compile,function($scope,$compile){$scope.count=0;$scope.add=function(){if(event.target.tagName.toLowerCase()=="input")return;vartarget=$(event.target);$scope.count++;target.html($compile("")($scope));}$scope.showValue=https://www.bazhishi.com/aldyjtapi/function(){alert(event.target.value)}}])

    注 : 这里用到了$compile服务，官方的解释是compile可以将一个HTML字符串或者DOM编译成模板，该模板能够与scope链接起来，也就是说直接插入一段html片段到页面中，虽然能插入进去，但是angular并没有编译，所以任何ng事件指令绑定都是无效的，通过compile能够将html片段先编译后再插入。

    至此,目的达到!

    Q2：angular 通过div动态添加的元素，怎么获取ng-bind

    可以通过$scope.watch("user", function(oldV, newV){
    })
    的方式监听变量，也可以直接用ng-model进行双向绑定，控制器中可以直接获取到值的变化，例如

    Q3：angularjs 怎么动态添加一个有directive的元素

    能具体说一下你的需求吗？

    创建自定义指令的方法：

    1234567891011
    12345678910varappauto=angular.module(appauto,[]);appauto.directive(appAuto,function(){return{//restrict限制使用：//A属性E元素C类名M注释，默认EArestrict:AEMC,template:

    自定义指令创建

    };});angular.bootstrap(document.getElementById(appauto),[appauto]);

    Q4：angular应该怎样去动态添加删除元素

    可以通过$scope.watch("user", function(oldV, newV){ }) 的方式监听变量，也可以直接用ng-model进行双向绑定，控制器中可以直接获取到值的变化，例如

    标签：angular 动态 元素

    最新文章

    猜你喜欢

    更多