angularjsjs require : '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.name = "mario";
$scope.age = "13";
}]);
myapp.directive("cust", function() {
return {
restrict : 'AE',
require : 'ngModel',
replace : true,
scope : {
model : '@atts'
},
template : '<div ng-click="change()">{{model}}' +
'</div>',
link : function(scope, elem, attrs, ctrl) {
scope.change = function() {
alert(ctrl.$viewValue);
ctrl.$setViewValue(scope.model + '123');
};
}
}
});
</script>
<style type="text/css">
</style>
</head>
<body ng-app="myapp">
<div class="container" ng-controller="MyController">
<cust ng-model="name" atts="{{name}}"></cust>
<cust ng-model="age" atts="{{age}}"></cust>
</div>
</body>
<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.name = "mario";
$scope.age = "13";
}]);
myapp.directive("cust", function() {
return {
restrict : 'AE',
require : 'ngModel',
replace : true,
scope : {
model : '@atts'
},
template : '<div ng-click="change()">{{model}}' +
'</div>',
link : function(scope, elem, attrs, ctrl) {
scope.change = function() {
alert(ctrl.$viewValue);
ctrl.$setViewValue(scope.model + '123');
};
}
}
});
</script>
<style type="text/css">
</style>
</head>
<body ng-app="myapp">
<div class="container" ng-controller="MyController">
<cust ng-model="name" atts="{{name}}"></cust>
<cust ng-model="age" atts="{{age}}"></cust>
</div>
</body>
</html>
可以看到ｃｕｓｔ各自ｍｏｄｅｌ值不干扰．