Создание уникального идентификатора с повторяющейся структурой директивы в AngularJS

Question

Так что это немного сложно, и я попытаюсь объяснить его полностью. В конечном итоге вопрос, на который я пытаюсь ответить, - это «Как я могу напечатать модель, а не значение модели, в HTML?» Я верю, что ответ на этот вопрос решит мою проблему, но я собираюсь обсудить мою проблему в полном объеме, чтобы вы все могли сказать мне, что я, вероятно, ошибаюсь. В этом случае у меня много переписывания, поэтому я надеюсь, что нет.

Сценарий: Вот исходная HTML-страница, где «in» - это настраиваемая директива.

<field model="model1" placeholder="Model 1" type="input"></field> 
<field model="model2" placeholder="Model 2" type="input"></field> 
<field model="model3" placeholder="Model 3" type="input"></field> 

Настоящая пользовательская директива.

app.directive("Field", function(){ 
    return{ 
    restrict: "E", 
    scope: { model: '=', placeholder:'@', type: '@'}, 
    templateUrl: function(tElement, tAttrs){ 
     return 'views/common/' + tAttrs.type + '.html'; 
    } 
    }; 
}); 

Вот шаблон для директивы. Атрибут type просто загружается в разные шаблоны, поэтому мне не нужно создавать сложную структуру if then. Потерпите меня, это может стать немного сложнее.

<field-label model="model">{{placeholder}}</field-label> 
<div class="col-sm-2 no-right-pad"> 
    <input type="text" ng-model="model.value" placeholder="{{placeholder}}" class="form-control input-sm"></input> 
</div> 
<div class="col-sm-2 no-pad"> 
    <field-options field-options-model="model" class="field-options"></field-options> 
</div> 

Как вы должны быть в состоянии сказать, это форма. Каждый начальный директивный вызов создает группу форм, содержащую метку, ввод и директиву, с помощью которых параметры могут быть добавлены в модель. Ради этого упражнения, скажем, я хочу иметь возможность добавлять комментарии к каждому входу. Я немного загрязнен, когда вы входите в директиву опций полей, и я меняю имя модели, это наследие предыдущих попыток и ничего не болит, но я все равно могу это изменить. Мне это не обязательно нужно, потому что директивы вложены и, таким образом, обмениваются $ scopes. Вот что директива:

app.directive("FieldOptions", function() { 
    return { 
    restrict: "E", 
    scope: { field: '=FieldOptionsModel' }, 
    templateUrl: 'views/common/field-options.html' 
    }; 
}); 

И этот шаблон:

<div class="dropdown"> 
    <a ng-href class="dropdown-toggle btn btn-bars" data-toggle="dropdown" tabindex="-1"><i class="fa fa-bars"></i></a> 
    <ul class="dropdown-menu pull-right"> 
    <li><a data-toggle="modal" href="#{{field}}-comment-modal">Add Comment</a></li> 
    </ul> 
</div> 

<div id="{{field}}-comment-modal" class="modal fade"> 
    <div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <h3>Submit Comment</h3> 
     </div> 
     <div class="modal-body"> 
     <div class="form-group"> 
      <label class="control-label">Add Comment</label> 
      <textarea ng-model="field.comments[0].comment" class="form-control"></textarea> 
     </div> 
     </div> 
     <div class="modal-footer"> 
     <button class="btn btn-warning" data-dismiss="modal">Cancel</button> 
     <button class="btn btn-primary" data-dismiss="modal" href="#">Add Comment</button> 
     </div> 
    </div> 
    </div> 
</div> 

OK, в случае, если вы не знаете, мои полевые опции есть кнопка с выпадающим списком, который выбирает всплывающее окно. Поскольку мы повторяем директивы, вы можете сразу сказать, что в настоящее время в структуре DOM хранятся по существу 3 идентичные копии этого всплывающего окна. 1 для модели 1, 1 для модели 2 и 1 для модели 3. Теперь у нас есть проблема с возможностью вызова соответствующего всплывающего окна для каждой группы полей. Поскольку он построен с одинаковым идентификатором, обычно есть 3 идентичных идентификатора, и браузеры не могут справиться с этим, поэтому они открывают только первый. Мое решение, как вы можете видеть здесь, - вызвать имя модели и ввести ее в идентификатор для всплывающего окна комментариев, что делает его уникальным для каждой группы полей. Проблема в том, что id = "{{field}} - comment-modal" не распечатывает id = "model1-comment-modal" как я хочу, вместо этого распечатывает id = "{" значение "=" независимо от того, какое значение может быть установлено, или пустое, если мы нажмем, чтобы добавить комментарий, прежде чем заполнить ввод. "} -комментарно-модальный".

Я возвращаюсь к своему первоначальному вопросу, «Как напечатать строку модели, а не данные, которые она представляет?» или, что я делаю неправильно, или как перестать беспокоиться и получить новую работу.

Примечание: Пожалуйста, будьте нееврейским, мой пример заглушен, фактическое использование является более сложным и повторяющимся.

Answer 1

Не уверен, что это будет возможно вывести имя переменной, но ваша проблема может быть решить с одним из следующих растворов:

1. Добавьте свойство «имя» для вашей модели объекта и использовать его для генерации ID или
2. Передайте новый параметр под названием «имя» в первый указатель и распространите его на внутренний. В любом случае вы уже используете стандартные атрибуты, такие как placeholder и type или
3. Создайте фабрику, которая будет отвечать за создание уникальных идентификаторов для всего приложения или
4. Просто используйте временную метку Date.now() для префикса вашего модального Я БЫ.

Надеюсь, это поможет.

Update: После того, как немного рытье это может быть возможным, чтобы получить строку model1, model2 из первой директивы, используя третий атрибуты функции директивы ссылка:

<field model="model1" placeholder="Model 1" type="input"></field> 

angular.module('app', []).directive("field", function() { 
    return { 
    restrict: "E", 
    scope: { model: '=', placeholder:'@', type: '@'}, 
    templateUrl: function(tElement, tAttrs){ 
     return 'views/common/' + tAttrs.type + '.html'; 
    }, 
    link: function(scope, elem, attrs) { 
     console.log(attrs.model); 
     //Will output model1 
    } 
    } 
}); 

, перенаправив эту строку к внутренней директиве вы можете создавать уникальные идентификаторы