Question

我知道这已被多次询问，但任何暴露的解决方案似乎对我有用。我有这个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'作为第三个参数不起作用，而且奇怪的是，我正在学习的教程使用相同的代码！

我错过了什么？

Answer 1

如果size属性在指令范围内可用（如评论中所述）。那么以下应该有效：

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

AngularJs：$ watch不会触发

1 个答案: