AngularJs 在模板指令中调用方法

Question

我有以下指令将 3 之类的数字值呈现为 3.xxx 取决于参数 decimals

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

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

更新: 视图值正在动态更改，因此每当值更改时都应刷新

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>

AngularJs 在模板指令中调用方法

AngularJs call method in template directive

angularjs

directive