如何将函数应用于控制器内的 angularjs 表达式？答案

【问题标题】：How to apply a function to an angularjs expression inside a controller?如何将函数应用于控制器内的 angularjs 表达式？
【发布时间】：2014-06-23 08:09:21
【问题描述】：

简单的问题，我想将我的控制器范围内的函数应用于表达式。

这是我的控制器中的 HTML

<p><span ng-if="paginaDetail.pubdate !== '' ">Vanaf {{paginaDetail.pubdate}}</span></p>

这是我的javascript

$scope.formatMysqlTimestampToHumanreadableDateTime = function(sDateTime){
    sDateTime = sDateTime.toString();
    var sHumanreadableDateTime = sDateTime.substring(8, 10) + "/" + sDateTime.substring(5, 7) + "/" + sDateTime.substring(0, 4);
    sHumanreadableDateTime += " " + sDateTime.substring(11, 13) + ":" + sDateTime.substring(14, 16);
    return sHumanreadableDateTime;
};

我试图做的是像这样将 formatMysqlTimestampToHumanreadableDateTime 应用于 paginaDetail.pubdate

<p><span ng-if="paginaDetail.pubdate !== '' ">Vanaf {{formatMysqlTimestampToHumanreadableDateTime(paginaDetail.pubdate)}}</span></p>

或者这个

<p><span ng-if="paginaDetail.pubdate !== '' ">Vanaf {{paginaDetail.pubdate|formatMysqlTimestampToHumanreadableDateTime}}</span></p>

但两种方式都不正确。

第一种方法有效，但在控制台上我有这个错误

错误：[$interpolate:interr] http://errors.angularjs.org/1.2.16/$interpolate/interr?p0=Tot%20%7B%7BformatMysqlTimestampToHumanreadableDateTime(paginaDetail.endpubdate)%7D%7D&p1=TypeError%3A%20sDateTime%20is%20undefined t/http://mysite.local/js/libs/angular.min.js:6:443 g/r@http://mysite.local/js/libs/angular.min.js:78:354 Yd/this.$gethttp://mysite.local/js/libs/angular.min.js:106:161 Yd/this.$gethttp://mysite.local/js/libs/angular.min.js:109:285 f@http://mysite.local/js/libs/angular.min.js:71:234 F@http://mysite.local/js/libs/angular.min.js:75:408 ve/http://mysite.local/js/libs/angular.min.js:76:457

http://mysite.local/js/libs/angular.min.js89号线

第二个根本不起作用。

你有什么建议吗？非常感谢。

【问题讨论】：

标签： javascript angularjs controller angularjs-scope

【解决方案1】：

如果我可以提供基于控制器的操作的替代选项...这对于 filter 来说是一个很好的场景

这个想法是在输入像{{myDate|format}}这样的html时使用过滤器。

过滤器定义如下：

myApp.filter('format', function () {
   return function (input) {
      //your date parser here
   };
});

或者你想用它做什么。这样您就可以重复使用它，而不必将函数放在您希望使用它的每个控制器中。

这里有一个fiddle，你可以扩展它，让你继续前进。

编辑更仔细地查看错误，我认为您的实际问题是未填充 .pubdate (TypeError: sDateTime is not defined)。尝试在函数中设置断点或查看控制台显示的内容。

【讨论】：

不幸的是，我无法在小提琴上轻松复制它。我只能告诉你我注意到了这种行为，过滤器一切正常，就像我的第一个解决方案一样，但仍然出现同样的错误。所以我合并记录了input，我注意到如果我将此函数应用于我的pubdate，则该值被记录四次，该值的前两次是 undefined 和其他两次是正确的值。我只是不明白为什么它被称为四次 ......任何线索？因为我可以像这样if(typeof input === 'undefined'){return "";} 解决它，但它不像解决方案那么聪明......
Angular 不断循环遍历控制器上的模型以查看是否有任何更改。这就是双向绑定的工作原理。如果您通过 AJAX 或任何其他未初始化 .pubdate 值第一次角度加载的方法加载它，它将首先通过它为空，然后填充。无论如何，这将不止一次。它被称为$digest 循环。我仍然推荐过滤器...一些关于摘要的信息：onehungrymind.com/notes-on-angularjs-scope-life-cycle
它是通过 ajax api 管理的，你是对的，所以我认为这个检查 if(typeof input === 'undefined'){return "";} 可能没问题。顺便谢谢你的链接！

【解决方案2】：

这个问题已经有了正确答案，但这可能有助于更好地理解它。对于“如何在 Angular 表达式中运行/应用函数”这个问题，我可以这样介绍，

将你的函数分配给 $scope.something 并运行它。示例：

控制器中的 JavaScript：

$scope.printMe= function(text){
   return text;
}

HTML（表达式）：

<p>{{printMe("Hello!")}}</p>

您将在您的<p> 标签中获得Hello!

【讨论】：

【解决方案3】：

实际上，您的示例 {{func(param)}} 工作正常：http://jsfiddle.net/HB7LU/4418/。问题出在别的东西上。试着用小提琴来说明你的问题。

【讨论】：