zettapi_client/lib/directives/dynamicField/dynamicField.dir.js

Admin panel and client-side CRUD operations in angular to use with zettapi_server rest api to get started quickly in any CMS project.

app.directive('zlDynamicField', function() {
  return {
    restrict: 'E',
    scope: {
      field: '=',
      model: '=',
      key: '@',
      zlClass: '@?',
      lookup: '=?'
    },
    replace: false,
    template: '<div ng-include src="contentUrl" include-replace></div>',
    controller: function($scope, $entity, zapi) {
      $scope.useInputLarge = zapi.useInputLarge;

      if (typeof $scope.lookup === 'undefined') $scope.lookup = {};
      if (typeof $scope.zlClass === 'undefined') $scope.zlClass = "form-control";
      $scope.$watch('field.type', onFieldChange);

      function onFieldChange(newField) {
        if (!newField) return;
        var type = $scope.field.type || 'Unknown';
        if (type === 'ObjectId') {
          var ref = $scope.field.ref;
          if (typeof ref === 'undefined') type = "String";
          else {
            if ($scope.lookup[ref]) return;
            else $scope.lookup[ref] = [];

            $entity.get(ref).then(function(response) {
              $scope.lookup[ref] = response.data;
            });
          }
        }
        $scope.contentUrl = "directives/dynamicField/" + type + ".html";
      }
    }
  };
});