AngularJS оценивает переменную $rootScope в шаблоне директивы

У меня есть директива, которая создает поле ввода. Мне нужно установить для атрибута ng-model этого поля ввода значение переменной $rootScope. Причина этого в том, что я хочу, чтобы поле ввода было в макете и привязывалось к разным моделям в зависимости от того, какая страница загружена. Я решил установить эту глобальную переменную в каждом контроллере и получить к ней доступ в директиве.

ATM переменная жестко закодирована

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

И директива

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">'
    }

});

Он отображается как

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

а текст внутри поля ввода является значением переменной mymodel. В console.log показано

search.name
search.name  

Может ли кто-нибудь пролить свет на этот вопрос?


person glasspill    schedule 15.03.2013    source источник
comment
Также можно взглянуть на ссылку $root в вашем шаблоне, которая содержит ссылку на $rootScope в директивах, имеющих свою область действия. См. - stackoverflow.com/questions/22216441/   -  person cchamberlain    schedule 29.03.2015


Ответы (1)


Я думаю, ты хочешь

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

Скрипка.

Обратите внимание, что вам нужно будет ввести $rootScope в вашу директиву:

Directives.directive('inputFilter', function($rootScope) {
person Mark Rajcok    schedule 15.03.2013
comment
есть идеи, почему значение переменной отображается, если я изменяю шаблон следующим образом? jsfiddle.net/ZavXw/1 - person glasspill; 15.03.2013
comment
в чем разница между ng-model={{mymodel}} и placeholder={{mymodel}} - person glasspill; 15.03.2013
comment
1. Ваша скрипка: {{}} говорит Angular интерполировать значение. Поскольку ваша область действия контроллера прототипически наследуется от $rootScope, Angular заменяет {{mymodel}} интерполированным значением search.name. 2. Вы не можете использовать {{}} внутри ng-модели, потому что Angular не будет интерполировать значения ng-модели. Значение ng-model должно быть (назначаемым) угловым выражением. (Точно так же значение ng-click не может содержать {{}} - оно также должно быть выражением Angular). Значение placeholder может содержать {{}}, потому что компилятор Angular заметит это и интерполирует. - person Mark Rajcok; 15.03.2013
comment
@glasspill, так что простое правило таково: если в документации Angular сказано, что для чего-то требуется выражение Angular, мы не можем использовать там {{}}. В нашем HTML (и шаблонах) мы можем использовать {{}} (если это не где-то, где Angular хочет видеть выражение Angular), и Angular выполнит магию интерполяции. - person Mark Rajcok; 15.03.2013
comment
Спасибо, это было очень неприятно и запутанно - person glasspill; 15.03.2013
comment
но почему это не работает в заполнителе, например: template: '<input class="filter" type="text" ng-model="' + $rootScope.mymodel + '" placeholder="{{$rootScope.mymodel}}">' - person Sandeep; 07.09.2015