AngularJS evaluate $rootScope variable in directive template
46,105
What I think you want is
template: '<input class="filter" type="text" ng-model="'
+ $rootScope.mymodel + '" placeholder="Nach filtern">'
Note that you will need to inject $rootScope
into your directive:
Directives.directive('inputFilter', function($rootScope) {
Comments
-
glasspill almost 2 years
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?
-
glasspill over 11 yearsany idea why the variable value is shown if i change the template like this? jsfiddle.net/ZavXw/1
-
glasspill over 11 yearswhat is the difference between ng-model="{{mymodel}}" and placeholder="{{mymodel}}"
-
Mark Rajcok over 11 years1. Your fiddle: {{}} tells Angular to interpolate the value. Since your controller scope prototypically inherits from $rootScope, Angular replaces
{{mymodel}}
with the interpolated value ofsearch.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 11 years@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 11 yearsThank you, this was very frustrating and confusing
-
Sandeep almost 9 yearsbut why it's not work in placeholder like:
template: '<input class="filter" type="text" ng-model="' + $rootScope.mymodel + '" placeholder="{{$rootScope.mymodel}}">'