Как универсализировать компоненты на Angular?

Question

[Максим Иванов]

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

Есть например такие блоки

блок услуги

<!-- блок контента (услуги) -->
        <div class="col-content" ng-class="{'hide': !processess.length}">
          <div class="blc title">{{ title.process }}</div>

          <span class="blc" ng-repeat="process in processess" 
          		ng-click="processCreateInfo(process)" 
          		data-id="{{ process.id }}"
				      ng-class="{'active' : process.active}">

          	<span class="icons">
            	<i class="fa fa-dot-circle-o"></i>
            </span>

            <span>{{ process.title }}</span>
            <span class="clearfix"></span>
          </span>

        </div>
        <!-- end/блок контента (боковой)-->

блок задачи

<!-- блок контента (мои процессы) -->
        <div class="myprocesses col-content pagination-parent"
        ng-class="{'hide': (!myprocessess.length && myprocessess.active == 0) ? 1 : 0 }">

          <div class="blc title">{{ title.my }}</div>
          
          <div ng-class="{'hide': !myprocessess[myprocessess.length-1].title}">
            <span class="blc" data-myprocess-id="{{ myprocess.id }}"
                ng-repeat="myprocess in myprocessess" 
                ng-click="myprocessOpenInfo(myprocess)"
                ng-class="{'active' : myprocess.active}"
                >
               <span class="icons">
                <i class="fa fa-circle-o"></i>
               </span>

               <span>{{ myprocess.title }}</span>
               <span class="blc-subtitle">{{ myprocess.subtitle1 }}</span>
               <span class="blc-subtitle">{{ myprocess.subtitle2 }}</span>

            </span>
          </div>

          <ul class="pagination" 
              data-count="{{ myprocessess.pagecount }}" 
              ng-class="{'hide': !(myprocessess.pagecount > 1)}">

            <li class="pagination-left waves-effect">
              <a href="#!"><i class="material-icons">chevron_left</i></a>
            </li>
            
            <span class="pagination-block">
              <span class="pagination-full">
                
                <li ng-repeat="i in [] | range:myprocessess.pagecount"
                    ng-class="{'active': i==myprocessess.active}" 
                    ng-click="openPagePagination('myprocessess', i)"
                    data-list="{{i}}">

                  <a href="#!"> {{ i+1 }} </a>
                </li>

              </span>
            </span>

            <li class="pagination-right waves-effect">
              <a href="#!"><i class="material-icons">chevron_right</i></a>
            </li>
          </ul>

        </div>
        <!-- end/блок контента (боковой)-->

col-content вроде бы общий, но там может быть и пагинация для блока, а может и не быть
да еще в некоторых местах нужно скрывать блоки, а в некоторых нет

Как создать такой компонент widgets, чтобы он подстраивался под данные, которые нужны ему?

Answer 1

[Ihor Gevorkyan]

scope мета-дексриптор, при создании директивы, позволяет прокинуть в контроллер директивы, в вашем случае, объект, свойства которого будут конфигурационными. В версии ангуляра 1.5, вроде, кроме директив, появились компоненты, они имеют небольшие отличия от директив, в доке ангуляра есть таблица разницы, но, в целом, Вам подходят и директива, и компонент, выбирайте по вкусу

Answer 2

[Алексей Ярков]

Различия компонента и директивы