我们知道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
(#换成@)。