ChoosePageTemplate.js

import angular from 'angular';
import htmlChoosePageTemplate from './choose-page-template.html';

const TEMPLATES = [
  { id: '1-column-simple', name: '1-Column Simple', icon: 'icon-grid' },
  { id: '2-column-simple', name: '2-Column Simple', icon: 'icon-grid' },
  { id: '3-column-simple', name: '3-Column Simple', icon: 'icon-grid' },
  { id: '1-column-staggered', name: '1-Column Staggered', icon: 'icon-grid' },
  { id: '2-column-staggered', name: '2-Column Staggered', icon: 'icon-grid' },
  { id: '3-column-staggered', name: '3-Column Staggered', icon: 'icon-grid' },
  { id: '2-column-sidebar-left', name: '2-Column Sidebar Left', icon: 'icon-grid' },
  { id: '2-column-equal', name: '2-Column Equal', icon: 'icon-grid' },
  { id: '3-column-equal', name: '3-Column Equal', icon: 'icon-grid' }
];

/**
 * Choose content capsule page template from a list of static options
 */
export default class ChoosePageTemplate
{
  constructor()
  {
    this.template = htmlChoosePageTemplate;
  }

  link($scope, elem, attrs)
  {
    console.log(this); // undefined

    $scope.valid = false;
    $scope.templates = TEMPLATES;

    $scope.$watch('settings.template', (templateId) => {
      if (!templateId) return;

      $scope.valid = true;

      // Deselect previously selected template if there is one
      let prevSelected = elem[0].querySelector('.selected');
      if (prevSelected) {
        prevSelected.classList.remove('selected');
      }

      // Highlight selected template
      elem[0].querySelector('[data-page-template-id="' + templateId + '"]').classList.add('selected');
    });
  }
}