Menu
Hi which is better? What is the difference? What are the pros and cons?
Here is the comparision code between the two:
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 Please be aware that both codes does the same. Logs on the console with the value of the model
449
ngModel usually use for input tags for bind a variable that we can change variable from controller and html page but ngBind use for display a variable in html page and we can change variable just from controller and html just show variable.
The ngModel directive is a directive that is used to bind the values of the HTML controls (input, select, and textarea) or any custom form controls, and stores the required user value in a variable and we can use that variable whenever we require that value. It also is used during form validations.
The ng-change directive requires a ng-model directive to be present. The ng-change directive from AngularJS will not override the element's original onchange event, both the ng-change expression and the original onchange event will be executed.
ng-value="'hard'" ng-model is intended to be put inside of form elements and has two-way data binding ($scope --> view and view --> $scope) e.g. <input ng-model="val"/>. or you can say The ng-model directive binds the value of HTML controls (input, select, textarea) to application data.
With scope:{ngModel:'='} ,
It creates a directive with isolate scope , here basically scopes are isolated and its doesn't inherit from the parent $scope , but values are passed into the directive which are required for this directive. if your use '=' then its two way data binding .
well advantages and disadvantages depends on your requirement .
Advantages :
$scope.$watch every time , in order to update the view in your directive
if values of the parent scope variables changes. '=' does the job .reusable component ,can use in multiple places in your application.directive controller directly even if the link function doesn't exist in your directive.disadvantages :
with require:'ngModel'
Advantages:
publish-subscribe design pattern).disadvantage
link function in-order to get the parents controller and its scopes variables and methods.$scope.$watch to update the view if parents scope variables changes. this and $scope
94
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
