How to bind custom directive value to custom directive from parent scope?

Question

Angular

Hi everybody! There is a problem with data transfer and their binding into a custom directive.
When passing data through ngModel to a custom directive with a local scope, the data is not bound.
My first directive is a inputform. To be more precise, this is a double ng-repeattemplate that runs through the template object and data, compares them and creates a form with inputs. Everything works fine, but I decided to make it a inputcustom directive. Here is the result:

<div ng-repeat="item in head">
      <div ng-repeat="(key, value) in data" ng-if="key === item.name">
        <labe>{{item.title}}</label>
          <div>
         <!-- Моя кастомная директива инпутов, которая привязывает "data[key]" -->
            <custom-tag type="item.type" tag-class="form-control" ng-model="data[key]"></custom-tag>
          </div>
      </div>
    </div>
    <div class="control-group">
      <!-- Еще одна директива (это кнопка сохранения), которая в конечном результате забирает данные с инпутов и обновляет/сохраняет модель -->
      <twins-buttons config="buttons" data="data"></twins-buttons>
    </div>

And here is the code for my custom 'input' directive

.directive('customTag', function() {

          return {
            scope: {
              type: "="
            
            },
            require: '^ngModel', // Запрашиваю ng-model с parrent scope, так как, у этой свой локальный скоуп
            restrict: 'E',
            compile: function(el, attr) {

                var input = angular.element('<input/>'); // далее создаю инпут элемент
                el.replaceWith(input); // после чего меняю кастомный тег на созданный инпут

                return function linking($scope, el, attr, ngModel) {
                    // ngModel - как я понима должна быть ссылка на модель
                    // 
                    var mod = ngModel.$ViewValue;
                    el.attr('ng-model, mod)  // поэтому создаем тег и добавляем туда наше значение из parent scope

But the value is not connected, can anyone tell me what is the reason? What did you miss?

Answer 1

А зачем вам нужен вот такой изврат с compile? Ведь можно просто сделать через template:

return {
       require: '^ngModel',
       template: '<input ng-model='mod'>',
       scope: {
              type: "=",
              mod: "=",
        },
}

Почитайте, как работают директивы на angular js, у вас подход не совсем правильный. Почитать можно например в офф. доке.

Answer 2

1. Вам необязательно создавать скоуп в принципе, не то что закрытый.

.directive('customTag', function($parse) {

          return {
            require: '^ngModel', // Запрашиваю ng-model с parrent scope, так как, у этой свой локальный скоуп
            restrict: 'E',
            compile: function(el, attr) {

                var input = angular.element('<input/>'); // далее создаю инпут элемент
                el.replaceWith(input); // после чего меняю кастомный тег на созданный инпут

                return function linking($scope, el, attr, ngModel) {
                    var type = $parse(attr.type)($scope); // Вот вам ваш тип
                    // ngModel - как я понима должна быть ссылка на модель
                    // 
                    var mod = ngModel.$ViewValue;
                    el.attr('ng-model, mod)  // поэтому создаем тег и добавляем туда наше значение из parent scope

2. ngModel.$viewValue, с маленькой буквы. ngModel в вашей директиве это не модель, а контроллер директивы ng-model, для связывания данных она никак не предназначена.