angularjs: один шаблон html для нескольких контроллеров

Question

Я думал об этом вопросе какое-то время, что лучше всего использовать для повторного использования шаблона html в angularjs, учитывая, что представление (html) связано с контроллером в случае двусторонней привязки данных?

, например:

<a ng-repeat="(uuid, parent) in pageData.parents" class="list-group-item list-group-item-padding" ng-click="click(parent.uuid)"> 
    <table class="table-grid"> 
     <tbody> 
     <tr> 
      <td> 
       {{parent.name}} 
      </td> 
      <td> 
       <span class="pull-right {{parent.stateCss}} state-label-font">{{parent.state}}</span> 
      </td> 
     </tr> 
     </tbody> 
    </table> 
</a> 

в выше надреза коде, вид привязан к какому-то контроллеру, скажем ParentController, вы можете увидеть все данные в поле зрения были названы в честь «родителя». Теперь у меня есть еще один контроллер, который говорит ChildController, который хочет повторно использовать один и тот же HTML-код, но данные называются «child». Это говорит о том, что привязка данных в этом примере изменится на {{child.name}}, {{child.stateCss}} ...

способ, которым Angularjs связывает модель, чтобы увидеть причину много повторяющегося HTML-кода, даже если они выглядят весьма схожими. На самом деле не Angularjs, серверная структура MVC на стороне сервера имеет ту же проблему, пока вы используете имя переменной модели жесткого кода в файле просмотра для последующего рендеринга.

Я видел, что какое-то веб-приложение, не использующее MVC, имеет несколько html-кода, которые устанавливают базовый скелет страницы, а затем использует JQuery для динамической подачи данных для просмотра в режиме программирования. Этот способ JQuery не является моим предпочтением, но он сохраняет много html-кода, приложение, которое, по моему мнению, довольно сложное только в виде ~ 1000 html-кода, который выполняет такие задачи, как ~ 10 дополнительных страниц, список, wizard ...

В angularjs , одно из решений, которое я могу себе представить, заключается в замене переменных модели с учетом настраиваемой директивы для изменения их объема/контроллера во время выполнения. Или иметь директиву, получающую объект конфигурации, который генерирует привязку элемента html к сконфигурированному контроллеру/области во время компиляции.

что вы думаете?

Answer 1

Проект Angular UI Bootstrap выполняет это с использованием комбинации директив и услуги $templateCache. По сути, $templateCache предварительно заполнен шаблоном HTML и задан статический URL-адрес, например template/somedirective/snippetname.html. Затем директива указывает этот url как свой шаблонUrl. Взгляните на раздел руководства Writing Directives (Long Version), или даже лучше, посмотрите на некоторые source code!

Answer 2

Я думаю, что для повторного использования html правильным решением является создание пользовательских директив. Сначала они немного сложны, но с ними можно добиться большой производительности.