Как связать значение кастомной директивы с кастомной директивой из parent scope?

Question

[DarthJS]

Все привет! Есть проблемка с прокидкой данных и их биндингом в кастомную директиву.
При прокидке через ngModel данных в кастомную директиву с локальным scope, данные не биндятся.

Моя первая директива это input форма. Если быть точнее, это двойной ng-repeat темплейт, который бежит по обьекту шаблона и данным, сравнивает их и создает форму с инпутами. Все работает отлично, но я решил сделать input кастомной директивой. Вот результат:

<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>

И вот код моей кастомной директивы 'input'

.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

Но значение не связывается, может кто подскажет в чем причина? Что упустил?

Answer 1

[Николай]

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

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

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

Comments

[DarthJS]

сори, забыл уточнить, кастомный тег специально для того, что тег может быть и вовсе не input, я хочу его создавать в зависимости от условия полученных данных, поэтому темплейт не использовал

[Николай]

Ну, в любом случае в аттрибут ng-model вы записываете не то, что нужно. Нужно - название переменной ( в данном случае 'mod').

[Николай]

Ещё вариант - посмотреть в сторону директивы ngSwitch (https://docs.angularjs.org/api/ng/directive/ngSwitch), например в web версии телеграма отображение в окне чата сделано через него - выглядит очень даже удобно.

[DarthJS]

Николай: var mod = ngModel.$ViewValue; -- типа тут не правильно? я в мод присваиваю ссылку на значение с ng-model и пихаю это в созданный атрибут

[Николай]

DarthJS: да, эта часть неправильная. $ViewValue - это значение переменной в текущий момент во view. Вам же нужно название переменной, чтобы ангуляр смог сделать биндинги.

[DarthJS]

Николай: понял. спасибо.. буду пробовать

[DarthJS]

Николай: за ng-switch спасибо, я его использую в другой директиве, но хотел бы избавиться

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, для связывания данных она никак не предназначена.

Comments

[DarthJS]

Спасибо за ответ. $viewValue эт же уже результат, то есть значение. Насколько я понимаю, туда нужно пихать ссылку на обьект, а не конечный результат.
Да и ко всему оно мне пишет в созданном ng-model NaN, почему не пойму.. И с обьектом data не биндит :(

[_ _]

DarthJS: Вам не нужен ngModel, он не для этого