Coq Directive

Coq Directive

Coq directives are form-related, so they keep higher priority than ngForm to benefit from ngForm directives.

Input types

Coq directives deals with default input types provided by Angular, but you can still provide your own input types :

var myApp = angular.module('app', ['coq','ngResource']);

myApp.config(function(coqModelFormInputsProvider) {
  coqModelFormInputsProvider.registerInputs({
    'userChooser' : { 'user-chooser' : '' }
  });
});

myApp.factory('TeamModel', function() {
  return Coq.factory({
    /* ... */
    $attributes : {
      /* ... */
      'users': 'userChooser'
    }
    /* ... */
});

// "users" attribute will be rendered with your custom directive 'user-chooser'

coq-model

Scope : <form>

Can take model instance as value.

See myController.js that provide model with values

<div ng-controller="myController">
   <form coq-model="team1">
      <!-- Inputs will be automatically added to form (wrapped in <p>) -->
   </form>
</div>

See myController2.js that provide model empty new record

<div ng-controller="myController">
   <form coq-model="newTeam">
      <!-- Inputs will be automatically added to form (wrapped in <p>) -->
   </form>
</div>

coq-model-insert-mode

Valid values are :

• "append" (default)
• "prepend"
• "replace"

<div ng-controller="myController" coq-model-insert-mode="prepend" ng-submit="team1.update()">
   <form coq-model="team1">
      <!-- Inputs will be automatically added to form (wrapped in <p>) before the <div> -->
      <div class="mySubmitBtn">
        <input type="submit" value="Send">
      </div>
   </form>
</div>

coq-model-attribute

Scope : <input>

If coq-model find at least one <input> with coq-model-attribute, it will not append all inputs to $element.

Notes:

• coq-model on parent <form> is mandatory.
• ng-model attribute is mandatory for now, this will be optional in futur releases (we trying hard too)

See myController.js that provide model with values

<div ng-controller="myController">
   <form coq-model="team1">
      <label class="my-fancy-style">Team name :</label>
      <p>
        <input coq-model-attribute="name" ng-model="team1.name" />
      </p>
   </form>
</div>

---

Appendix

modelTeam.js

app.service('TeamsModel', function($resource, Coq) {
  return Coq.factory({
     $resource : $resource('/teams/:id'),
     $attributes : {
       id      : 'number',
       name    : 'text'
     }
  });
});

myController.js

app.controller('myController', function($scope, TeamsModel) {
   $scope.team1 = TeamsModel.find(1);
});

myController2.js

app.controller('myController', function($scope, TeamsModel) {
   $scope.newTeam = new TeamsModel(); // empty record
});