模板指令中的AngularJs调用方法

Question

我有以下指令，根据参数decimals，将像3这样的数字值呈现为3.xxx

 app.directive("myValue", () => {
        return {
            template: '{{value.toFixed(decimals)}}',
            scope: {
                'value': '=myValue',
                'decimals': '=myValueDecimals'
            },
            link: function () {
            }
        }
    });

现在我想包括对特殊值的处理，比如undefined、NAN等等。我已经有了一个函数来代替value.toFixed(小数)，但是我不知道如何在指令中直接调用一个函数。

更新：视图值正在动态更改，因此在值更改时应刷新视图值

Answer 1

您需要在指令的作用域中创建viewValue，并将已处理的值分配给它。对于打字本，您可能需要这样做：

interface IValueScope extends IScope {
    viewValue:number;
}

 app.directive("myValue", () => {
        return {
            template: '{{viewValue}}',
            scope: {
                'value': '=myValue',
                'decimals': '=myValueDecimals',
   
            },
            link: function ($scope:IValueScope) {
            $scope.viewValue = $scope.value == null || Number.isNaN($scope.value)
                ? 0 
                : $scope.value.toFixed($scope.decimals);
            }
        }
    });

​

const app = angular.module('app', []);

app.component('home', {
  template: '<span><button ng-click="$ctrl.inc()">Inc</button> <data-val data-my-value="$ctrl.v" data-my-value-decimals="2" ></my-value> </span>',
  controller: function() {
    this.v = 1;
    this.inc = () => this.v += 1;
  }

});

app.directive("val", () => {
  return {
    template: '{{viewValue}}',
    scope: {
      'value': '<myValue',
      'decimals': '<myValueDecimals',
    },
    link: function($scope) {
      const newValue = (v) => v == null || Number.isNaN(v) ?
        0 :
        v.toFixed($scope.decimals)

      $scope.viewValue = newValue($scope.value);

      const cleanup = $scope.$watch('value', (value) => {
        $scope.viewValue = newValue(value)
      });
      $scope.$on('$destroy', () => cleanup());
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="app">
  <home></home>
</div>

​