How to genericize components in Angular?

Question

Angular

I have blocks, they are basically similar and there can be a lot of them, but each has its own application functionality.
There are, for example, blocks such as
a service block

<!-- блок контента (услуги) -->
        <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/блок контента (боковой)-->

task block

<!-- блок контента (мои процессы) -->
        <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 seems to be general, but there may or may not be pagination for the block, and
even in some places you need to hide blocks, and in others not
How to create a widgets component so that it adapts to the data it needs?

Answer 1

The scope meta-descriptor, when creating a directive, allows you to pass directives to the controller, in your case, an object whose properties will be configuration. In the version of angular 1.5, it seems that, in addition to directives, components appeared, they have slight differences from directives, there is a difference table in the angular dock, but, in general, both the directive and the component are suitable for you, choose according to your taste