angular实现了所有HTML的基础控件（input，select，textarea），能胜任大多数场景。然而，如果我们需要更加灵活，我们可以通过编写一个directive来实现自定义表单控件的目的。
为了制定控件和ngModel一起工作，并且实现双向数据绑定，它需要：
实现render方法，是负责在执行完并通过所有NgModelController.$formatters方法后，呈现数据的方法。
调用$setViewValue方法，无论任何时候用户与控件发生交互，model需要进行响应的更新。这通常在DOM事件监听器里实现。
可以查看$compileProvider.directive获取更多信息。
下面的例子展示如何添加双向数据绑定特性到可以编辑的元素中。
<!DOCTYPE HTML> <html lang="zh-cn" ng-app="CustomControl"> <head> <meta charset="UTF-8"> <title>CustomControl</title> <style type="text/css"> .ng-cloak { display: none; } div[contenteditable] { cursor: pointer; background-color: #D0D0D0; } </style> </head> <body ng-controller="MyCtrl"> <div> <div contenteditable="true" ng-model="content" title="点击后编辑">My Little Dada</div> <pre>model = {{content}}</pre> <button ng-click="reset()">reset model tirgger model to view($render)</button> </div> <script src="https://www.jb51.net/angular-1.0.1.js" type="text/javascript"></script> <script type="text/javascript"> var app = angular.module("CustomControl", []); app.controller("MyCtrl", function ($scope) { $scope.reset = function() { $scope.content = "My Little Dada"; //在这里如何获取NgModelController呢？如果你们知道，希望可以指点指点！谢谢 }; }); app.directive("contenteditable", function () { return { require:"ngModel", link:function (scope, ele, attrs, ctrl) { //view -> model ele.bind("blur keyup",function() { scope.$apply(function() { console.log("setViewValue"); ctrl.$setViewValue(ele.text()); }); }); //model -> view ctrl.$render = function(value) { console.log("render"); ele.html(value); }; //读取初始值 ctrl.$setViewValue(ele.text()); } }; }); </script> </body> </html>
您可能感兴趣的文章: