码迷,mamicode.com
首页 > Web开发 > 详细

AngularJS自定义表单控件

时间:2015-07-05 23:56:49      阅读:141      评论:0      收藏:0      [点我收藏+]

标签:

<!doctype html>
<html ng-app="myApp">
<head>
    <script src="G:\\Source\\Repos\\GWD\\Gridsum.WebDissector.Website.ZC\\Gridsum.WebDissector.Website.ZC\\Pages\\dist\\assets\\lib\\angularjs\\angular.js"></script>
    <script type="text/javascript">
        angular.module(‘myApp‘, []).directive(‘contenteditable‘, function () {
            return {
                require: ‘ngModel‘,
                link: function (scope, elm, attrs, ctrl) {
                    // view -> model
                    elm.bind(‘blur‘, function () {
                        scope.$apply(function () {
                            ctrl.$setViewValue(elm.html());
                        });
                    });
                    // model -> view
                    ctrl.$render = function (value) {
                        elm.html(value);
                    };
                    // load init value from DOM
                    ctrl.$setViewValue(elm.html());
                }
            };
        });
    </script>
</head>
<body>
    <div contenteditable="true" ng-model="content" title="Click to edit">Some</div>
<pre>model = {{content}}</pre>
    <style type="text/css">
        div[contentEditable] {
            cursor: pointer;
            background-color: #D0D0D0;
        }
    </style>
</body>
</html>

  

AngularJS自定义表单控件

标签:

原文地址:http://www.cnblogs.com/chengshuiqiang/p/4623273.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!