AngularJs: $ watch не срабатывает

Question

AngularJs: $ watch не срабатывает

0

Я знаю, что это было задано много раз, но любое открытое решение, похоже, работает для меня. У меня этот HTML-код

<body ng-controller="mainCtrl">
  <h4>{{size}}</h4>
  <input type="range" ng-model="size" min="1" max="100" />
  <div font-scale="{{size}}">I'm some text</div>
</body>

Вход работает, значение изменяется и фактически привязывается к {{size}} правильно.

Тогда у меня есть моя директива:

MyApp.controller('mainCtrl', function($scope) {
  $scope.size = 30;
});


MyApp.directive('fontScale', function(){
 return {
   link: function(scope, el, attrs){
     scope.$watch(attrs['fontScale'], function(newVal){
       console.log('testing');
       el.css('font-size', newVal+'px');
     });
    }
   }
 });

"Тестирование" отображается в консоли только один раз, когда страница загружается, но при изменении значения через ползунок это не так. Но он правильно связывает значение {{size}}.

Добавление "TRUE" в качестве третьего параметра не работает, и, с любопытством, учебник, изучающий это, работает с одним и тем же кодом!

Что мне не хватает?

user1869935 08 янв. 2016, в 17:21

Источник

0

Область действия директивы не является областью действия вашего контроллера. Таким образом, директива не имеет никакого представления о свойстве size, поэтому вы не можете просматривать свойство, которого там нет. а) убедитесь, что «размер» доступен в вашей области видимости (поэтому прочитайте об изолированных областях) и б) укажите наблюдателя как область действия. $ watch («размер» ...)
Markus 08 янв. 2016, в 15:57
0

Размер в области видимости $ предназначен только для инициализации и отображения значения. Директива фактически получает значение из параметра 'font-scale'. $ Scope.size, находящийся не в той же области, не должен быть проблемой. Или, по крайней мере, я так понимаю, если не ошибаюсь.
user1869935 08 янв. 2016, в 16:09

Теги:

javascript

angularjs

angularjs-scope

angularjs-directive

1 ответ

Ещё вопросы

Область действия директивы не является областью действия вашего контроллера. Таким образом, директива не имеет никакого представления о свойстве size, поэтому вы не можете просматривать свойство, которого там нет. а) убедитесь, что «размер» доступен в вашей области видимости (поэтому прочитайте об изолированных областях) и б) укажите наблюдателя как область действия. $ watch («размер» ...)
Размер в области видимости $ предназначен только для инициализации и отображения значения. Директива фактически получает значение из параметра 'font-scale'. $ Scope.size, находящийся не в той же области, не должен быть проблемой. Или, по крайней мере, я так понимаю, если не ошибаюсь.

Markus · Accepted Answer · 2016-01-08T13-31-00.000Z

Если свойство размера доступно в области ваших указаний (как указано в вашем комментарии). Затем должно работать следующее:

scope.$watch('size', function(newVal) {
    el.css('font-size', newVal+'px');
}