AngularJS $watch的用法

最新推荐文章于 2018-08-02 09:16:32 发布

原创最新推荐文章于 2018-08-02 09:16:32 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

AngularJS 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一个使用AngularJS实现的自定义指令示例，该指令通过$watch监听数据变化并实时更新DOM显示。此外，还展示了如何通过用户输入触发数据变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>$watch监听器</title>
</head>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="js.js"></script>
<body ng-app="myApp" ng-init="dataObj = {name:'Jadon',gender:'male',age:25}">
  <my-tag data="dataObj"></my-tag>
</body>
</html>

JS:

angular.module("myApp",[])
  .directive("myTag",function($rootScope){
    return {
      restrict : "E",
      template : "<div class='namecard'/>",
      replace : true,
      link : function(scope,element,attrs){
        element.append("<div>name : <span field='name'></span></div>")
          .append("<div>gender : <span field='gender'></span></div>")
          .append("<div>age : <span field='age'></span></div>")
          .append("<div>job : <input type='text' field='job'></span></div>")
          .append("<div>输出job : <span field='job'></span></div>");
        //监听dataObj变量的变化，并在变化时更新DOM
        scope.$watch(attrs.data,function(nv,ov){
          var fields = element.find("span");
          fields[0].textContent = nv.name;
          fields[1].textContent = nv.gender;
          fields[2].textContent = nv.age;
        },true);

        //验证代码，1秒改变1次age的值
        setInterval(function(){
          scope.$apply("dataObj.age=dataObj.age+1;")
        },1000);

        var model = attrs.data;
        //监听输入
        element.find("input").on("keyup",function(event){
          var field = event.target.getAttribute("field");
          scope[model][field] = event.target.value;
          var fields = element.find("span");
          fields[3].textContent =  scope[model][field];
          scope.$apply("");
        });
      }
    };
  });