指令中访问ngModel的值_[(ngmodel)] 读取类中的值-CSDN博客

本文链接：https://blog.csdn.net/u014788227/article/details/50402534

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <link rel="stylesheet" href="bootstrap.min.css">
        <script src="jquery.min.js"></script>
        <script src="angular.min.js"></script>
       <script src="bootstrap.min.js"></script>
       <script type="text/javascript">
           var myapp = angular.module("myapp", []);
            myapp.controller("MyController", ['$scope', function($scope) {
                $scope.content = "mario";
           }]);
            myapp.directive("contenteditable", function() {
                return {
                   require: 'ngModel',
                    link: function(scope, ele, attrs, ctrl) {
                       ele.bind('keyup', function() {
                           scope.$apply(function() {
                               ctrl.$setViewValue(ele.text());
                           });
                       });
                       ctrl.$render = function() {
                           ele.html(ctrl.$viewValue);
                       };
                    }
                }
           });
       </script>
       <style type="text/css">
           div[contentEditable] {
               cursor: pointer;
           }
       </style>
    </head>
    <body ng-app="myapp">
        <div class="container" ng-controller="MyController">
            <div>
               <h1>Controller</h1>
               <input class="input-mini" type="text" ng-model="content" />
            </div>
            <br/>
            <h1>Directive</h1>
            <div contentEditable="true" ng-model="content" title="click to edit."></div>
        </div>
    </body>
</html>

可以看到指令requre了ngModel指令，于是使用了contentEditable指令的div中的ng-model在指令中就可以被操作。

ctrl.$render = function() {
ele.html(ctrl.$viewValue);
};

一旦model改变将会调用到这个函数。