Home » Angularjs » Is there any way to provide a default value for an isolated scope alias?

Is there any way to provide a default value for an isolated scope alias?

Posted by: admin November 30, 2017 Leave a comment

Questions:

Say I have the following as part of my directive definition:

scope: {
    prop1: '@'
}

Is there any way for prop1 to get a default value if the directive doesn’t have a prop1 attribute? Sure, I can check if it is defined myself and set it, but the property isn’t always set when you would expect. I’m just wondering if there is any syntax I missed in the documentation, or if there is a good standard way of doing this. Thanks.

Answers:

It depends on what default value you want to assign. If you want to default to a name in the parent scope, setting a default attribute value in the directive’s compile function will work:

  compile: function(element, attrs) {
    if (attrs.person == undefined) {
      attrs.$set("person", "person");
    }
  ...

If you want the directive to provide the default value, it gets a little tricker as Angular will not let you assign to the alias in the isolate scope (you will get a “Non-assignable model expression” exception from the watcher that’s trying to propagate the assignment to the isolated parent scope). However you can prevent this by marking the attribute as optional (which means Angular won’t register the listener when the property is ommited).

  scope: {
    person: "=?"
  },
  link: function(scope, element, attrs) {
    if (scope.person == undefined) {
      scope.person = "Bob";
    }
    ...
  }

Questions:
Answers:
scope['prop1'] = scope['prop1'] || '@'