angularjs - ngModel and How it is Used -

i getting started angular , ran directive below. read few tutorials , reading now, don't understand "require: ngmodel" does, because have no idea ngmodel overall. now, if not insane, it's same directive provides 2 way binding (the whole $scope.blah = "blah blah" inside ctrl, , {{blah}} show 'blah blah' inside html element controlled directive.

that doesn't me here. furthermore, don't understand "model: '@ngmodel' does. @ngmodel implies variable on parents scope, ngmodel isn't variable there.

tl;dr:

1. what "require: ngmodel" do?
2. what "model : '@ngmodel'" do?

*auth service passes profile's dateformat property (irrelevant q)

thanks in advance help.

angular.module('app').directive('directivedate', function($filter, auth) {      return {         require: 'ngmodel',         scope:  {             model : '@ngmodel',             search: '=?search'         },         restrict: 'e',         replace: true,         template: '<span>{{ search }}</span>',         link: function($scope) {              $scope.set = function () {                 $scope.text = $filter('date')($scope.model, auth.profile.dateformat );                 $scope.search = $scope.text;             };              $scope.$watch( function(){ return $scope.model; }, function () {                 $scope.set();             }, true );              //update if locale changes             $scope.$on('$localechangesuccess', function () {                 $scope.set();             });         }     }; }); 

ngmodel angular directive responsible data-binding. through controller, ngmodelcontroller, it's possible create directives render and/or update model.

take @ following code. it's simple numeric , down control. job render model , update when user clicks on + , - buttons.

app.directive('numberinput', function() {   return {     require: 'ngmodel',     restrict: 'e',     template: '<span></span><button>+</button><button>-</button>',     link: function(scope, element, attrs, ngmodelctrl) {       var span = element.find('span'),           plusbutton = element.find('button').eq(0),           minusbutton = element.find('button').eq(1);        ngmodelctrl.$render = function(value) {         updatevalue();       };        plusbutton.on('click', function() {         ngmodelctrl.$setviewvalue(ngmodelctrl.$modelvalue + 1);         updatevalue();       });        minusbutton.on('click', function() {         ngmodelctrl.$setviewvalue(ngmodelctrl.$modelvalue - 1);         updatevalue();       });        function updatevalue(value) {         span.html(ngmodelctrl.$modelvalue);       }     }   }; }); 

working plunker

since interacts model, can use ngmodelcontroller. that, use require option tell angular want inject controller link function fourth argument. now, ngmodelcontroller has vast api , won't detail here. need example 2 methods, $render , $setviewvalue, , 1 property, $modelvalue.

$render , $setviewvalue 2 ways of same road. $render called angular every time model changes elsewhere directive can (re)render it, , $setviewvalue should called directive every time user should change model's value. , $modelvalue current value of model. rest of code pretty self-explanatory.

finally, ngmodelcontroller has arguably shortcoming: doesn't work "reference" types (arrays, objects, etc). if have directive binds to, say, array, , array later changes (for instance, item added), angular won't call $render , directive won't know should update model representation. same true if directive adds/removes item to/from array , call $setviewvalue: angular won't update model because it'll think nothing has changed (although array's content has changed, reference remains same).

this should started. suggest read ngmodelcontroller documentation , the official guide on directives can understand better how works.

p.s: directive have posted above isn't using ngmodelcontroller @ all, require: 'ngmodel' line useless. it's accessing ng-model attribute value.