What value requires: "ngModel"?

Question

This is the HTML for my directive:

<textarea data-modal="modal" data-mydir ng:model="abc"></textarea> 

In my directive, I have the following:

 return { require: 'ngModel', replace: true, scope: { modal: '=modal', ngModel: '=', pid: '=pid' }, 

Can someone tell me what value is required: "ngModel"? I see this in many different directives. Can I call it modal?

I am confused because when I change it to data-modal I get a message from Angular saying

 Controller 'ngModel', required by directive 'textarea', can't be found! 

Answer 1

The require command gives you a controller for the directive that you call the fourth argument to your link function. (You can use ^ to find the controller on the parent element ? Makes it optional.) Thus, require: 'ngModel' provides you with a controller for the ngModel directive, which is ngModelController .

Directive controllers can be written to provide APIs that other directives can use; with ngModelController you get access to special functionality built into ngModel , including getting and setting the value. Consider the following example:

 <input color-picker ng-model="project.color"> 

 app.directive('colorPicker', function() { return { require: 'ngModel', link: function(scope, element, attrs, ngModel) { element.colorPicker({ // initialize the color to the color on the scope pickerDefault: scope.color, // update the ngModel whenever we pick a new color onColorChange: function(id, newValue) { scope.$apply(function() { ngModel.$setViewValue(newValue); }); } }); // update the color picker whenever the value on the scope changes ngModel.$render = function() { element.val(ngModel.$modelValue); element.change(); }; } } }); 

This directive uses the ngModel controller to get and set the color value from colorpicker. See this JSFiddle example: http://jsfiddle.net/BinaryMuse/AnMhx/

If you use require: 'ngModel' , you probably shouldn't use ngModel: '=' in your highlight area ngModel: '=' ; ngModelController gives you all the access you need to change the value.

The bottom example on the AngularJS page also uses this function (except for using a custom controller, not ngModel ).

---

As for a directive shell, for example, ngModel vs ng-model vs data-ng-model : while Angular supports using multiple forms in the DOM, when you reference a directive by name (for example, when creating a directive or using require ), you always use the form lowerCamelCase for the name.

Answer 2

As stated in the Creating Custom Directives documentation: (First, your question in a comment)

Can i use data-ng-model ?

Answer:

Best practice . Prefer using a dash-delimited format (e.g. ng-bind for ngBind ). If you want to use the HTML validation tool, you can instead use the version of data -prefixed (e.g. data-ng-bind for ngBind ). The other forms shown above are accepted for hereditary reasons, but we advise you to avoid them.

Examples:

 <my-dir></my-dir> <span my-dir="exp"></span> <!-- directive: my-dir exp --> <span class="my-dir: exp;"></span> 

Secondly, what does ?ngModel ?

 // Always use along with an ng-model require: '?ngModel', 

When using your directive, it forces it to be used with the ng-model attribute / controller.

require configuration

(Extract from AngularJS by Brad Green and Syam Seshadri)

Other directives may have this controller passed to them with the require property syntax. The full request form is as follows:

 require: '^?directiveName' 

Options:

• directiveName

  This name with a camel name indicates which directive the controller should receive. Therefore, if our <my-menuitem> directive should find the controller on the parent <my-menu> , wed write it as myMenu.

• ^

  By default, Angular receives a controller from a named directive on the same element. Adding this optional ^ character also means finding a DOM tree to find a directive. As an example, wed should add this character; the final line will be ^myMenu .

• ?

  If the required controller is not found, Angular will throw an exception to tell you about the problem. Adding a character ? a line says that this controller is optional and that an exception should not be thrown if it is not found. Although this seems unlikely if we want to use <my-menu-item> without the <mymenu> container, we could add this to the final query string ?^myMenu .

Answer 3

require:'ngModel' and require:'^ngModel' allow you to enter a model attached to an element or its parent element to which the directive is bound.

This is basically the easiest way to pass ngModel to the link / compile function, instead passing it using the scope option. When you have access to ngModel, you can change its value with $setViewValue , make it dirty / clean using $formatters , apply observers, etc.

Below is a simple example to pass ngModel and change its value after 5 seconds.

Demo: http://jsfiddle.net/t2GAS/2/

 myApp.directive('myDirective', function($timeout) { return { restrict: 'EA', require: 'ngModel', link: function(scope, element, attrs, ngModel) { ngModel.$render = function() { $timeout(function() { ngModel.$setViewValue('StackOverflow'); }, 5000); }; } }; });