Angular 插值系统中的点(嵌套）表示法

Dot (nested) notation in Angular's interpolate system

本文关键字：嵌套 表示 插值 系统 Angular      更新时间：2023-09-26

假设我有一个对象，例如：

obj = {foo: 42, bar: 'moo'}

以及一个内插字符串，例如：

s = 'Do {{ bar }} {{ foo }} times.'

在 Angular 中插入：

var interp = $interpolate(s);
var res = interp(obj);
console.log(res);  // <--- This will return 'Do moo 42 times.'

有没有办法表达虚线/嵌套符号？例：

obj = {n: {foo: 42}, bar: 'moo'}
s = 'Do {{ bar }} {{ n.foo }} times.'  // <--- This doesn't work
var interp = $interpolate(s);
var res = interp(obj);
console.log(res);

$parse服务可以解决您的问题。

$parse服务将角度表达式转换为函数。

您应该将表达式 n.foo 转换为函数：

var parserFunc = $parse(obj.x)

现在，如果将 parserFunc 函数与要解析的参数一起使用，它将根据表达式返回值。解决方案可以是这样的：

var module = angular.module('name', []);
module.directive('app', ['$interpolate','$parse', function ($interpolate,$parse) {
    return {
    link: function () {
      var obj = {n: {foo: 42}, bar: 'moo', x: 'n.foo'};
      obj.parserFunc = $parse(obj.x);
      var s = 'Do {{ bar }} {{ parserFunc(this) }} times.';  // <--- x is 'n.foo'
      var interp = $interpolate(s);
      var res = interp(obj);
      console.log(res);
    }
  }
}]);
angular.bootstrap(document, ['name']);

代码在 jsfiddle.net/utnqdfwd/5/中工作正常

相关文章：