AngularJS $watch的用法

来源：互联网发布：mysql from not 编辑：程序博客网时间：2024/05/28 16:30

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

PS: directive用法要注意了，定义的tag

.directive("myTag"

--->对应在html上面应该是

<my-tag

0 0