AngularJS directive with default options

Use the =? flag for the property in the scope block of the directive.

angular.module('myApp',[])  .directive('myDirective', function(){    return {      template: 'hello {{name}}',      scope: {        // use the =? to denote the property as optional        name: '=?'      },      controller: function($scope){        // check if it was defined.  If not - set a default        $scope.name = angular.isDefined($scope.name) ? $scope.name : 'default name';      }    }  });

You can use compile function - read attributes if they are not set - fill them with default values.

.directive('pagination', ['$parse', 'paginationConfig', function($parse, config) {    ...    controller: 'PaginationController',    compile: function(element, attrs){       if (!attrs.attrOne) { attrs.attrOne = 'default value'; }       if (!attrs.attrTwo) { attrs.attrTwo = 42; }    },        ...  }});

I'm using AngularJS v1.5.10 and found the preLink compile function to work rather well for setting default attribute values.

Just a reminder:

• attrs holds the raw DOM attribute values which are always either undefined or strings.
• scope holds (among other things) the DOM attribute values parsed according to the provided isolate scope specification (= / < / @ / etc.).

Abridged snippet:

.directive('myCustomToggle', function () {  return {    restrict: 'E',    replace: true,    require: 'ngModel',    transclude: true,    scope: {      ngModel: '=',      ngModelOptions: '<?',      ngTrueValue: '<?',      ngFalseValue: '<?',    },    link: {      pre: function preLink(scope, element, attrs, ctrl) {        // defaults for optional attributes        scope.ngTrueValue = attrs.ngTrueValue !== undefined          ? scope.ngTrueValue          : true;        scope.ngFalseValue = attrs.ngFalseValue !== undefined          ? scope.ngFalseValue          : false;        scope.ngModelOptions = attrs.ngModelOptions !== undefined          ? scope.ngModelOptions          : {};      },      post: function postLink(scope, element, attrs, ctrl) {        ...        function updateModel(disable) {          // flip model value          var newValue = disable            ? scope.ngFalseValue            : scope.ngTrueValue;          // assign it to the view          ctrl.$setViewValue(newValue);          ctrl.$render();        }        ...    },    template: ...  }});