Hi there, I'm trying to figure out which option is better. Can you please explain the differences and list out the pros and cons of each?
Below is a comparison between the two options:
scope: { ngModel:'=' }
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="app">
<input ng-model="code"></my-directive>
</div>
<script type="text/javascript">
app = angular.module('app', []);
app.directive('input', function(){
return {
scope: {
ngModel: '='
},
link: function(scope, element, attrs){
scope.$watch('ngModel', function(value){
console.log(value);
})
}
}
});
</script>
</body>
</html>
require: 'ngModel',
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="app">
<input ng-model="code"></my-directive>
</div>
<script type="text/javascript">
app = angular.module('app', []);
app.directive('input', function(){
return {
require: 'ngModel',
link: function(scope, element, attrs, ngModel){
attrs.$observe('ngModel', function(value){
scope.$watch(value, function(newValue){
console.log(newValue);
});
});
}
}
});
</script>
</body>
</html>
PS Note that both code snippets achieve the same purpose: logging the model value on the console