如何在AngularJS模板中调用标准javascript函数

How to call standard javascript functions in AngularJS templates?

本文关键字：调用 标准 javascript 函数 AngularJS      更新时间：2023-09-26

我可以在AngularJS大括号/表示法中使用JavaScript函数吗？

我已经尝试了下面的代码。如果你不评论我的JS函数，它们就不起作用。

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="">
  
<p>Some formula: {{ 1+2 }}</p>
<!--
<p>Some function: {{Math.sin(12)}}</p>
<p>Some constructor: {{new Date()}}</p>
-->
  
</div>

是否可以解锁/启用？

更新

好吧，在简单的{{}}中，函数可以封装到UDF中。但是UI网格中单元格模板中的函数呢？我仍然可以在那里使用简单的公式，但不能使用任何函数，甚至不能使用$scope中定义的UDF。

在下面的示例中，cellTemplateWorks使用了简单的加法，并且它是有效的。模板cellTemplateNotWorks使用对myFunction的调用，不在模板中工作（而在简单占位符中工作）。

var myApp = angular.module('myApp', ['ui.grid', 'myControllers']);
var myControllers = angular.module('myControllers', []);
myControllers
  .controller('MyController', ['$scope', function ($scope) {
    
    $scope.myData = [{"x": 1}, {"x": 2}, {"x": 3}, {"x": 4}, {"x": 5}];
    
    var cellTemplateWorks = "<div '
       class='"ngCellText'" ng-class='"col.colIndex()'"><span ng-cell-text>'
        {{row.entity[col.field]+1}}'
        </span></div>";
    
     var cellTemplateNotWorks = "<div '
        class='"ngCellText'" ng-class='"col.colIndex()'"><span ng-cell-text>'
        {{myFunction(row.entity[col.field])}}'
        </span></div>";
    
    $scope.gridOptions = {
            data: 'myData',
            columnDefs: [
//                {field: 'x', displayName: 'x', },
//              {field: 'x', displayName: 'sin(x)', cellTemplate: cellTemplateNotWorks},
              {field: 'x', displayName: 'sin(x)', cellTemplate: cellTemplateWorks},
            ]
        };
    
    $scope.myFunction = function(arg) {
        return Math.sin(arg);
    };
  }]);
.myGrid {
    width: 500px;
    height: 250px;
  }
<link rel="styleSheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/3.0.7/ui-grid.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/3.0.7/ui-grid.js"></script>
<body ng-app="myApp">
    <div ng-controller="MyController">
      <p>MyFunction does work: {{myFunction(12)}}</p>
      
      <p>MyFunction does not work in UI Grid:
      
        <div ui-grid="gridOptions" class="myGrid"></div>
      
      
      </p>
        
      
    </div>
</body>

文档中的报价：

Angular表达式与JavaScript表达式Angular表达式类似JavaScript表达式，但有以下差异：

上下文：根据全局窗在Angular中，表达式是根据作用域对象进行计算的。

宽恕：在JavaScript中，尝试评估未定义的属性生成ReferenceError或TypeError。在Angular中，表达式评估对未定义和无效是宽容的。

无控制流语句：不能在Angular表达式：条件、循环或异常。

无函数声明：不能在Angular中声明函数表达式，甚至在ng-init指令中。

不使用文字符号创建RegExp：不能创建正则表达式Angular表达式中的表达式。

不使用新运算符创建对象：您不能在中使用新运算符Angular表达式。

无逗号和无效运算符：不能在角度表达式。

过滤器：您可以在表达式中使用过滤器来格式化之前的数据显示。

如果你想运行更复杂的JavaScript代码，你应该让它控制器方法，并从视图中调用该方法。如果你想eval（）一个角度表达式，使用$eval（（）方法。

最后一段解释了建议的执行方式。

更新：

看起来您正在使用UI网格。表达式不起作用的原因是，这个网格的作用域与您声明函数的作用域不同。如果你想访问控制器的作用域，你应该使用grid.appScope:

 var cellTemplateNotWorks = "<div '
    class='"ngCellText'" ng-class='"col.colIndex()'"><span ng-cell-text>'
    {{grid.appScope.myFunction(row.entity[col.field])}}'
    </span></div>";

在本例中，您可以使用grid.appScope访问模板内的myFunction。

相关文章：