AngularJS $watch的用法

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

JadonYuen

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

阅读量1.4k

点赞数

分类专栏： AngularJS

本文链接：https://blog.csdn.net/rcjjian/article/details/49532125

版权

AngularJS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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("");
        });
      }
    };
  });