AngularJS evaluate $rootScope variable in directive template

Question

I have a directive that creates an input field. I need to set the ng-model attribute of this input field to the value of a $rootScope variable. The reason behind this is that I want the input field to be in the layout, and bind to different models depending on what page is loaded. I thought I'd set this global variable in each controller and access it in the Directive.

ATM the variable is hard coded

App.run(function($rootScope){
    $rootScope.mymodel = 'search.name';
})

And the Directive

Directives.directive('inputFilter', function(){
    return{
        restrict: 'E',
        replace:true,
        controller: function($scope, $rootScope){
            console.log($scope.mymodel);
            console.log($rootScope.mymodel)

        },
        template: '<input class="filter" type="text" ng-model="mymodel" placeholder="Nach filtern">'
    }

});

It gets rendered as

<input class="filter ng-pristine ng-valid" type="text" ng-model="mymodel" placeholder="Filter">

and the text inside the input field is the value of mymodel variable. The console.log shows

search.name
search.name

Could anyone please shed some light on this issue?

Might also have a look at referencing $root in your template which holds a reference to $rootScope in directives that have their own scope. See - stackoverflow.com/questions/22216441/… — cchamberlain
– cchamberlain, Commented Mar 29, 2015 at 1:49

Andrew · Accepted Answer · 2016-09-05 17:43:04Z

13

What I think you want is

template: '<input class="filter" type="text" ng-model="' 
  + $rootScope.mymodel + '" placeholder="Nach filtern">'

Fiddle.

Note that you will need to inject $rootScope into your directive:

Directives.directive('inputFilter', function($rootScope) {

edited Sep 5, 2016 at 17:43

Andrew

49.8k15 gold badges99 silver badges145 bronze badges

answered Mar 15, 2013 at 14:38

Mark Rajcok

365k114 gold badges501 silver badges494 bronze badges

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

6 Comments

glasspill Over a year ago

any idea why the variable value is shown if i change the template like this? jsfiddle.net/ZavXw/1

glasspill Over a year ago

what is the difference between ng-model="{{mymodel}}" and placeholder="{{mymodel}}"

Mark Rajcok Over a year ago

1. Your fiddle: {{}} tells Angular to interpolate the value. Since your controller scope prototypically inherits from $rootScope, Angular replaces {{mymodel}} with the interpolated value of search.name. 2. You can't use {{}}s inside ng-model because Angular will not interpolate ng-model values. The ng-model value must be an (assignable) angular expression. (Similarly, ng-click's value can't contain {{}}s either -- it also has to be an Angular expression). The value of placeholder can contain {{}}s because the Angular compiler will notice it and interpolate it.

Mark Rajcok Over a year ago

@glasspill, so the simple rule is: if the Angular documentation says something needs an Angular expression, we can't use {{}}s there. In our HTML (and templates) we can use {{}} (as long as it is not somewhere Angular wants to see an Angular expression) and Angular will do the interpolation magic.

glasspill Over a year ago

Thank you, this was very frustrating and confusing

|

Collectives™ on Stack Overflow

AngularJS evaluate $rootScope variable in directive template

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related