AngularJS 1.3 Sample Directives, Filters and Miscellaneous

angularjs-addproperty-template.html

<!-- Bootstrap 3 -->
<div>
  <div class="modal fade" my-modal id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
       aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" ng-click="vm.cancel()"><span aria-hidden="true">&times;</span><span
              class="sr-only">Close</span></button>
          <h4 class="modal-title" id="myModalLabel">Add New Property</h4>
        </div>
        <form novalidate class="form-horizontal" role="form" name="newPropForm"
              ng-submit="vm.addProperty(newPropForm.$valid)">
          <div class="modal-body">

            <div ng-show="vm.requestStatus.text" class="alert"
                 ng-class="{'alert-success': vm.requestStatus.success, 'alert-danger': !vm.requestStatus.success}" role="alert">{{vm.requestStatus.text}}
            </div>

            <div class="form-group" ng-class="{'has-error': newPropForm.$submitted && newPropForm.addPropEnv.$error.required}">
              <label for="newPropEnvSelect" class="col-sm-2 control-label">Environment</label>

              <div class="col-sm-10">
                <select id="newPropEnvSelect" name="addPropEnv" class="form-control" ng-model="vm.addPropEnv"
                        ng-options="host.formatted for host in vm.hosts" required>
                  <option style="display:none" value="">Select an environment</option>
                </select>
              </div>
            </div>
            <div class="form-group" ng-class="{'has-error': newPropForm.$submitted && newPropForm.newKey.$error.required}">
              <label for="newKey" class="col-sm-2 control-label">Key</label>

              <div class="col-sm-10">
                <input name="newKey" class="form-control" type="text" id="newKey" placeholder="Key" required
                       ng-model="vm.prop.key">
              </div>
            </div>
            <div class="form-group" ng-class="{'has-error': newPropForm.$submitted && newPropForm.newValue.$error.required}">
              <label for="newValue" class="col-sm-2 control-label">Value</label>

              <div class="col-sm-10">
                <input name="newValue" class="form-control" type="text" id="newValue" placeholder="Value"
                       ng-model="vm.prop.value" required>
              </div>
            </div>
            <div class="form-group">
              <div class="col-sm-offset-2 col-sm-10">
                <div class="checkbox">
                  <label>
                    <input type="checkbox" ng-model="vm.prop.encrypted"> Encrypt this value in the database.
                  </label>
                </div>
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" ng-click="vm.cancel()" class="btn btn-default" >Cancel</button>
            <button type="submit" class="btn btn-primary">Add Property</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

angularjs-directive-modeltoadddata.js

// AngularJS 1.3 directive for an element which is Bootstrap modal to enter new data

.directive('addproperty', [function () {
  return {
    restrict: 'E',
    scope: {
      tableLevelMessage: '&'
    },
    controllerAs: 'vm',
    templateUrl: path + '/resources/template/addproperty.html',  // path needs to be replaced
    controller: ['$scope', 'envService', 'PropFactory', function($scope, envService, PropFactory){
      var vm = this;
      vm.requestStatus = {};
      envService.hosts().then(function (hosts) {
        vm.hosts = hosts;
      });

      this.cancel = function() {
        $scope.dismiss();
        $scope.newPropForm.$setPristine();
        $scope.newPropForm.$setUntouched();
        vm.prop = {};
        vm.requestStatus = {};
      };

      this.addProperty = function (valid) {
        if(!valid) {
          return;
        }

        vm.prop.encrypted = vm.prop.encrypted || false;

        PropFactory.property('add', vm.prop, vm.addPropEnv)
          .then(function (response) {
            if (response.success) {
              $scope.dismiss();
              $scope.newPropForm.$setPristine();
              $scope.newPropForm.$setUntouched();
              $scope.tableLevelMessage({
                response: {
                  success: true,
                  messageText: 'Data ' + vm.prop.key + ' successfully added.  Search to see the new data.'
              }});
              vm.prop = {};
              vm.requestStatus = {};
            } else {
              vm.requestStatus = {
                success: response.status,
                text: response.messageText
              }
            }
          }, function(response) {
              vm.requestStatus = {
                success: response.status,
                text: response.messageText
              }
            });
          };
    }]
  };
}])

angularjs-filterrow-template.html

<!-- what html looks like in the "parent" 

        <tr ng-repeat="prop in vm.myProps"
            filter-row data="prop" env="vm.searchEnv" table-level-message="vm.showTableMessage(response)"
            highlight-text="vm.query"></tr>

-->


<tr>
  <td><span ng-bind-html="data.endPoint | highlight:highlightText"></span></td>
  <td>
    <div ng-if="!data.$edit">{{ data.ipRange }}</div>
    <div ng-if="data.$edit">
      <input class="form-control input-sm" type="text" ng-model="editData.ipRange" name="iprange">
    </div>
  </td>
  <td>
    <div ng-if="!data.$edit">{{ data.portRange }}</div>
    <div ng-if="data.$edit">
      <input class="form-control input-sm" type="text" ng-model="editData.portRange" name="portrange">
    </div>
  </td>
  <td>
    <div ng-if="!data.$edit">{{ data.service }}</div>
    <div ng-if="data.$edit">
      <service-dropdown service-model="editData.service"></service-dropdown>
    </div>
  </td>
  <td>
    <div ng-if="!data.$edit">
      <button type="button" class="btn btn-primary btn-sm" ng-click="edit()">Edit</button>
      <button type="button" class="btn btn-danger btn-sm" ng-click="delete()">Delete</button>
    </div>
    <div ng-if="data.$edit">
      <button type="button" class="btn btn-success btn-sm" ng-click="save()">Save</button>
      <button type="button" class="btn btn-default btn-sm" ng-click="cancel()">Cancel</button>
    </div>
  </td>
</tr>

angularjs-rowlevel-directive.js

// Directive used at the row level in a table.  The domain is a "filter", hence the name "filter" in the directive

.directive('filterRow', ['MyFilterFactory', function(MyFilterFactory){
  return {
    restrict: 'A',
    replace: false,
    scope: {
      data: '=',
      env: '=',
      highlightText: '=',
      tableLevelMessage: '&'
    },
    templateUrl: path + '/resources/template/filter-row.html', //path should be replaced
    link: function(scope, elem) {
      scope.editData = {};

      scope.edit = function() {
        scope.data.$edit = true;
        scope.editData = angular.copy(scope.data);
      };

      scope.cancel = function() {
        scope.data.$edit = false;
        scope.editData = {};
      };

      scope.save = function() {
        scope.tableLevelMessage({response: {}});
        MyFilterFactory.ipfilter('update', scope.editData, scope.env)
          .then(function(response) {
            if (response.success) {
              scope.data = angular.copy(scope.editData);
              scope.data.$edit = false;
              scope.data.value = scope.editData.encrypted ? "*****" : scope.editData.value;
              scope.data.encrypted = scope.editData.encrypted;
              scope.editData = {};
            } else {
              scope.tableLevelMessage({response: response});
            }
          }, handleHttpError);
      };

      scope.delete = function() {
        scope.tableLevelMessage({response: {}});
        MyFilterFactory.myfilter('delete', scope.data, scope.env)
          .then(function(response) {
            if (response.success) {
              elem.remove();
            } else {
              scope.tableLevelMessage({response: response});
            }
          }, handleHttpError);
      };

      elem.on('$destroy', function () {
        scope.$destroy();
      });

      var handleHttpError = function (response) {
        scope.tableLevelMessage({response: response});
      };
    }
  };

}])

angularjs-sample-directives.js

// AngularJS 1.3

// Directive to close Bootstrap modal
.directive('myModal', function () {
  return {
    restrict: 'A',
    link: function (scope, element, attr) {
      scope.dismiss = function () {
        $(element).modal('hide');
      };
    }
  }
})

// Directive to add Bootstrap tooltip
.directive('tooltip', function () {
  return {
    restrict: 'A',
    link: function (scope, element, attrs) {
      $(element)
          .attr('title', attrs.tooltip)
          .tooltip({placement: "bottom"});
    }
  };
})

// Directive to add sorting to a table with Bootstrap 
.directive('simpleSort', ['$compile', function($compile) {
  return {
    restrict: 'A',
    scope: {
      currentSort: '=',
      sortBy : '@',
      sort: '&'
    },
    link: function(scope, elem, attrs, controller, transclude) {
      var template = '<span class="glyphicon rlc" ng-class="sortOrderClass()"></span>',
          $template = angular.element(template);
      $compile($template)(scope);
      elem.append($template);

      scope.$watch('currentSort.column', function(sort) {
        if (scope.sortBy == sort) {
          elem.addClass('sorted');
        } else {
          elem.removeClass('sorted');
        }
      });

      scope.sortOrderClass = function() {
        var cls = '',
            sort = scope.currentSort;
        if (scope.sortBy == sort.column ) {
          cls = sort.descending ? 'glyphicon-chevron-down' : 'glyphicon-chevron-up';
        }
        return cls;
      };

      elem.bind('click', function() {
        var sort = scope.currentSort;
        if (sort.column == scope.sortBy) {
            sort.descending = !sort.descending;
        } else {
            sort.column = scope.sortBy;
            sort.descending = false;
        }
        scope.sort({column: scope.sortBy});
        scope.$apply();
      });
    }
  };
}])

// Directive to build a drop-down
.directive('serviceDropdown', function () {
  return {
    restrict: 'E',
    scope: {
      serviceModel: '=',
      serviceId: '@',
      serviceName: '@'
    },
    template: '<select id="{{serviceId}}" name="{{serviceName}}" class="form-control" ng-model="serviceModel" required> ' +
                  '<option value="optionOne">Option One</option>' +
                  '<option value="optionTwo">Option Two</option>' +
                  '<option value="optionThree">Option Three</option>' +
                  '<option style="display:none" value="">Select service</option> ' +
            '</select>',
    link: function(scope, element, attrs) {
      console.log(scope);
      if (!attrs.serviceId) {
        scope.serviceId = "selectService" + scope.$id;
      }

      if (!attrs.serviceName) {
        scope.serviceName = 'selectService' + scope.$id;
      }

    }
  };
})

angularjs-sample-filters.js

// AngularJS 1.3
// Filter to highlight text
.filter('highlight', function($sce) {
  return function(text, phrase) {
    if (phrase) {
      text = text.replace(new RegExp('('+phrase+')', 'gi'), '<strong>$1</strong>')
    }
    return $sce.trustAsHtml(text)
  };
})