指令中访问ngModel的值
<!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>
<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改变将会调用到这个函数。