你的位置:首页 > 软件开发 > Java > 自定义Directive使用ngModel

自定义Directive使用ngModel

发布时间:2016-01-25 00:00:11
我们知道ngModel是AngularJS中默认的一个Directive,用于数据的双向绑定。通常是这样使用的:<input type="text" ng-model="customer.name" />在控制器中大致这样:$s ...

 

我们知道ngModel是AngularJS中默认的一个Directive,用于数据的双向绑定。通常是这样使用的:<input type="text" ng-model="customer.name" />在控制器中大致这样:$scope.customer ={在上一篇中,有关表格的Directive是这样使用的:

 

<table-helper datasource="customers" clumnmap="[{name: 'Name'}, {street: 'Street'}, {age: 'Age'}, {url: 'URL', hidden: true}]"></table-helper>以上,datasource代表数据源,是否可以用ng-model替代呢?<table-helper-with-ng-model ng-model="customers" columnmap="[{name:'Name'}...]">可是,自定义的tableHelper这个Direcitve如何获取到ngModel中的值呢?要解决的第一个问题是:如何拿到ngModel?--使用require字段

return {  restrict: 'E',  required: '?ngModel', //^ngModel本级或父级, ^^ngModel父级  scope: {    columnmap: '='  },  link: link,  template: template}
要解决的第二个问题是:如何从ngModel这个Direcitve拿数据?--使用ngModel.$modelValue要解决的的第三个问题是:当ngModel值变化,如何告之外界并重新加载表格?--大致有4种方法

//1 观察某个属性的值attrs.$observe('ngModel', function(value){  //监视变量的值  scope.$watch(value, function(newValue){    render();  });});//2 或者scope.$watch(attrs.ngModel, render);//3 或者scope.$watch(function(){  return ngModel.$modelValue;}, function(newValue){  render();})//4 或者ngModel.$render = function(){  render();}
相对完整的代码如下:

 

var tableHelperWithNgModel = function(){  var dataSource;  var template = '<div ></div>';    var link = function(scope, element, attrs, ngModel){      ...        function render(){      if(ngModel && ngModel.$modelValue.length){        datasource = ngModel.$modelValue;        table += tableStart;        table += renderHeader();        table += renderRows() + tableEnd;        renderTable();      }    }  };    return {    restrict: 'E',    required: '?ngModel', //^ngModel本级或父级, ^^ngModel父级    scope: {      columnmap: '='    },    link: link,    template: template  }}angular.module('direcitveModule')  .directive('tableHelperWithNgModel', tableHelperWithNgModel)var tableHelperWithNgModel = function(){  var dataSource;  var template = '<div ></div>';    var link = function(scope, element, attrs, ngModel){      //观察某个属性的值    attrs.$observe('ngModel', function(value){      //监视变量的值      scope.$watch(value, function(newValue){        render();      });    });        //或者    scope.$watch(attrs.ngModel, render);        //或者    scope.$watch(function(){      return ngModel.$modelValue;    }, function(newValue){      render();    })        //或者    ngModel.$render = function(){      render();    }        function render(){      if(ngModel && ngModel.$modelValue.length){        datasource = ngModel.$modelValue;        table += tableStart;        table += renderHeader();        table += renderRows() + tableEnd;        renderTable();      }    }  };    return {    restrict: 'E',    required: '?ngModel', //^ngModel本级或父级, ^^ngModel父级    scope: {      columnmap: '='    },    link: link,    template: template  }}angular.module('direcitveModule')  .directive('tableHelperWithNgModel', tableHelperWithNgModel)  

原标题:自定义Directive使用ngModel

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

可能感兴趣文章

我的浏览记录