Question

使用AngularJS显示某些数据时，它们将显示为文本。我想覆盖用于此表示的方法，而不是每次都写{{elem.print()}}。

问题：我应该在我的对象中定义哪种方法只需编写{{elem}}并获得（有效）与上述相同的结果？

使用示例的更长版本：

假设你收集了一些人，你写了转发器，你可以在里面：

{{person.name}} {{person.age}} {{person.address}}

但你可以为你的对象编写一个方法print，它返回所有文本，然后在你写的html中：

{{person.print()}}

但我也想摆脱那个电话，我想写一下

{{person}}

获取文本表示，我的表示，而不仅仅是对象的转储。我希望AngularJS调用每个应该显示的对象的方法。所以我的问题是这个方法是什么，肯定不是toString，我已经检查了。

Answer 1

在某些时候，角度获取数据。用户看文字。那么之间会发生什么？

@greenoldman AngularJS使用interpolate service来进行数据绑定。

下面是Adam Freeman撰写的来自 Pro AngularJS 的插值字符示例，我希望以下示例能为您提供帮助。

angular
  .module("exampleApp", [])
  .controller("defaultCtrl", defaultCtrl)
  .directive("evalExpression", evalExpression);

function defaultCtrl($scope) {
    $scope.dataValue = "100.23";
}

function evalExpression($interpolate) {
  var interpolationFn = $interpolate("The total is: {{amount | currency}} (including tax)");
  
  return {
    scope: {
      amount: "=amount",
      tax: "=tax"
    },
    link: function(scope, element, attrs) {
      scope.$watch("amount", function (newValue) {
        var localData = {
          total: Number(newValue) + (Number(newValue) * (Number(scope.tax) /100))
        }
        
        element.text(interpolationFn(scope));
      });
    }
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="exampleApp">
  <div ng-controller="defaultCtrl">
    <div class="well">
      <p><input class="form-control" ng-model="dataValue" /></p>
      <div>
        <span eval-expression amount="dataValue" tax="10"></span>
      </div>
    </div>
  </div>
</div>

Interpolation example with people data

<div ng-app="demo">
  <div ng-controller="DefaultController as ctrl">
    <h1>Persons</h1>
    <div ng-repeat="person in ctrl.persons">
      <person-details person="person"></person-details>
    </div>
  </div>
</div>

angular
    .module('demo', [])
  .controller('DefaultController', DefaultController)
  .directive('personDetails', personDetails);

    function DefaultController() {
   var vm = this;
   vm.persons = [
    { id: 1, name: 'Name 1', age: 24, address: 'Address Line 1' },
    { id: 2, name: 'Name 2', age: 22, address: 'Address Line 2' },
    { id: 3, name: 'Name 3', age: 23, address: 'Address Line 3' }
   ];
  }

  function PersonController() {
  }

  personDetails.$inject = ['$interpolate'];

  function personDetails($interpolate) {
    debugger
    var interpolationFn = $interpolate('{{person.name}} {{person.age}} {{person.address}}');
    var directive = {
        restrict: 'E',
        scope: {
        person: '=person'
      },
      link: link,
      controller: PersonController,
      controllerAs: 'vm',
      bindToController: true
    };

    return directive;

    function link(scope, element, attrs, ngModelCtrl) {
        debugger
      scope.$watch("vm.person", function (newValue, oldValue) {
        var value = interpolationFn(scope.vm);
        element.prop('innerHTML', value);
      });
    }
  }

Interpolation example with people data (using only AngularJS Controller)

<div ng-app="demo">
  <div ng-controller="DefaultController as ctrl">
    <h1>Persons</h1>
    <div ng-repeat="person in ctrl.persons">
      {{ctrl.printPersonDetails(person)}}
    </div>
  </div>
</div>

angular
    .module('demo', [])
  .controller('DefaultController', DefaultController);

  DefaultController.$inject = ['$interpolate'];

    function DefaultController($interpolate) {
   var vm = this;
   var interpolationFn = $interpolate('{{name}} {{age}} {{address}}');
   vm.persons = persons;
   vm.printPersonDetails = printPersonDetails;

   function printPersonDetails(person) {
    return interpolationFn(person);
   }
  }

  var persons = [
    { id: 1, name: 'Name 1', age: 24, address: 'Address Line 1' },
    { id: 2, name: 'Name 2', age: 22, address: 'Address Line 2' },
    { id: 3, name: 'Name 3', age: 23, address: 'Address Line 3' }
   ];

Answer 2

我认为这是不可能的，有角度的是使用自己的表达式，这与常见的js expressions略有不同。

角度表达式与JavaScript表达式

Angular表达式就像JavaScript表达式一样以下差异：
上下文：针对全局评估JavaScript表达式窗口。在Angular中，表达式是根据范围对象进行评估的。
原谅：在JavaScript中，尝试评估未定义的属性生成ReferenceError或TypeError。在Angular中，表达评估是对undefined和null的宽容。
过滤器：您可以在表达式中使用过滤器来格式化数据显示它。
无控制流声明：您无法在中使用以下内容角度表达式：条件，循环或异常。
无函数声明：您无法在Angular中声明函数表达式，甚至在ng-init指令中。
没有使用文字表示法创建RegExp ：您无法创建常规 Angular表达式中的表达式。
使用新操作员无法创建对象：您无法使用新的运算符一个角度表达。
无按位，逗号和无效操作符：您不能使用Bitwise，或者 Angular表达式中的void运算符。

在角度使用AST解析器和使用Function构造函数构造表达式的AST编译器{{person.name}} - 不要使用任何toString或其他方法，它类似于{{1 } js表达。

Angular使用scope.person.name服务将角度表达式转换为带$interpolate的html字符串。

parseStringifyInterceptor

我认为您的解决方案是使用角度滤镜。

在AngularJS中使用什么方法对数据进行文本表示？

2 个答案: