Isolate scope fallback in AngularJS

Question

I am trying to build a custom directive for input box, which has input-model as an attribute used as ng-model. This input-model attribute is two way bound with an inner scope variable.

templateUrl:'/components/directives/inputBox.html',
transclude:true,
restrict: 'A',
scope:{
  userInput : '=inputModel'
}

Now the issue is, in the main html when I explicitly provide input-model, then it works fine. But I want a fallback when input-model is not provided, then the two way binding should be removed. The template is like

<input id="searchinput" type="search"
               name="inputBox"
               class="form-control"
               placeholder="{{placeholder}}"
               ng-model="userInput"
               ng-pattern="pattern">

So, when I do not provide the input-model attribute in the main html

<div input-box></div>

The binding fails as expected, giving the error :

Error: [$compile:nonassign] Expression 'undefined' used with directive 'inputBox' is non-assignable!

I want to make a fallback to avoid this scenario. How should I proceed?

Community · Accepted Answer · 2017-05-23 12:05:52Z

1

Will this solution work for you?

Angular directive with default options

edited May 23, 2017 at 12:05

CommunityBot

11 silver badge

answered Dec 18, 2014 at 10:51

Jeff Ling

1,0329 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Simon Staton · Accepted Answer · 2014-12-18 11:23:05Z

1

You can check the defined attributes in the compile method, this will allow you to handle the case before binding takes place.

    return {
    template: '<div>{{userInput}} - test</div>',
    transclude: true,
    restrict: 'A',
    scope: {
        userInput: '=inputModel'
    },
    compile: function(element, attrs, transclude) {
        if (!attrs.inputModel) {
            attrs.inputModel = 'userInput';
        }
        return {
            pre: function(scope, element, attrs) {},
            post: function(scope, element, attrs) {}
        }
    }
};

http://jsfiddle.net/anf4ryzL/

answered Dec 18, 2014 at 11:23

Simon Staton

4,5054 gold badges32 silver badges50 bronze badges

5 Comments

Koustuv Sinha Over a year ago

Thanks! But have a question, if I use compile then I cant use link? then where to inject link function? in the post block?

Simon Staton Over a year ago

Compile returns two methods, a pre-link and post-link these are your link functions. By default the link method used outside compile is the same as the post method so you can just use the post: function(){} in the same way as link

Koustuv Sinha Over a year ago

Ok. Then when to use the pre: function() {} block if I can handle pre-binding logic in compile itself?

Simon Staton Over a year ago

The way compile works is in 3 steps, first angular runs a directives compile function, then it runs its own compile function which will set your isolated scope (this is why we set the attribute in the compile function first), then it passes the scope, element and attributes into a pre-link method and runs these in order of parent > child then it runs the post-link methods in reverse order child > parent. This means you can A. do stuff before angular makes your scope (compile), B. do stuff before all child directives links run (pre-link), C. do stuff after child directives links (post-link)

Simon Staton Over a year ago

The difference between compile and pre-link/post-link is that compile has no scope yet, the isolated scope of your directive is created between compile and link

Collectives™ on Stack Overflow

Isolate scope fallback in AngularJS

2 Answers 2

Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related