Angularjs custom directive with own ng-model

by gsubiran

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<div ng-controller="MainCtrl as main" ng-form="myForm">
  <my-directive name=myDirectiveName ng-model="main.arrayElements" ng-required=true></my-directive>
  <br />
  Errors: {{myForm.myDirectiveName.$error}}
  <br />
  <input type=button ng-click="main.setElements()" value="add (outside directive)" /><br />
  <input type=button ng-click="main.clearElements()" value="clear (outside directive)" />
  <br />
</div>

JavaScript

angular.module('myApp', [])

.directive('myDirective', function($timeout) {
    return {
      restrict: 'EA',
      require: 'ngModel',
      controller: 'myDirectiveController',
      controllerAs: 'D_MD',
      link: function(scope, element, attrs, ngModel) {
        ngModel.$validators.required = function(modelValue) {
          var result = false;
          if (modelValue && modelValue.length > 0)
            result = true;

          return result;
        };
      },
      bindToController: {
        ngModel: '='
      },
      template: '(<span>ArrayLength:{{D_MD.ngModel.length}}</span>)<br /><input type=button value="add (inside directive)" ng-click=D_MD.AddElem() /><br /><input value="clear (inside directive)" type=button ng-click=D_MD.Clear() />'
    };
  })
  .controller('myDirectiveController', [function() {
    var CTX = this;
    //debugger;
    //CTX.ngModel = "pipo";
    CTX.clearModel = function() {
      CTX.ngModel = [];
    };
    CTX.AddElem = function() {
      CTX.ngModel.push({
        Name: 'obj100',
        Value: 100
      });
    };
    CTX.Clear = function() {
      CTX.ngModel = [];
    };
  }])
  .controller('MainCtrl', function($scope) {
    var CTX = this;
    CTX.patito = 'donde esta el patito';
    CTX.arrayElements = [];
    CTX.setElements = function() {
      CTX.arrayElements = [{
        Name: 'obj0',
        Value: 0
      }, {
        Name: 'obj1',
        Value: 1
      }, {
        Name: 'obj2',
        Value: 2
      }];
    };
    CTX.clearElements = function() {
      CTX.arrayElements = [];
    };
  })