javascript 如何将函数应用于控制器内的 angularjs 表达式?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/24361148/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-28 02:38:21  来源:igfitidea点击:

How to apply a function to an angularjs expression inside a controller?

javascriptangularjscontrollerangularjs-scope

提问by axel

simple question, I would like to apply a function inside my controller scope to an expression.

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

This is my HTML inside my controller

这是我的控制器中的 HTML

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

This is my javascript

这是我的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;
};

and what I was trying to do is to apply formatMysqlTimestampToHumanreadableDateTimeto paginaDetail.pubdatelike this

我想做的是将formatMysqlTimestampToHumanreadableDateTime应用到paginaDetail.pubdate像这样

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

or this

或这个

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

but both ways are not correct.

但两种方式都不正确。

The first method works but on the console i've this error

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

Error: [$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:443g/r@http://mysite.local/js/libs/angular.min.js:78:354Yd/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:234F@http://mysite.local/js/libs/angular.min.js:75:408ve/http://mysite.local/js/libs/angular.min.js:76:457

http://mysite.local/js/libs/angular.min.jsLine 89

错误:[$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:443g/r@ http://mysite.local/js/libs/angular.min。 js:78:354Yd/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:234F@ http://mysite.local/js/libs/angular.min.js: 75:408ve/http://mysite.local/js/libs/angular.min.js:76:457

http://mysite.local/js/libs/angular.min.js第 89 行

and the second one simply doesn't work.

而第二个根本不起作用。

Do you have any suggestions? Thanks a lot.

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

采纳答案by Jorg

If I can offer an alternative option to controller based actions... this looks like a great scenario for a filter

如果我可以为基于控制器的操作提供替代选项......这看起来是过滤器的一个很好的场景

The idea is to use filter the input while it's being put into the html like {{myDate|format}}.

这个想法是在将输入放入 html 时使用过滤器{{myDate|format}}

The filter is defined like:

过滤器定义如下:

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

Or whatever else you wish to do with it. This way you can reuse it without having to put the function in every controller you wish to use it in.

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

Here's a fiddleyou can expand on, to get you going.

这是一个你可以扩展的小提琴,让你继续前进。

editLooking more closely at the error I think your actual problem is that .pubdateis not populated (TypeError: sDateTime is not defined). Try to put a breakpoint in the function or see what console says.

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

回答by gorpacrate

Actually your example {{func(param)}}works fine: http://jsfiddle.net/HB7LU/4418/. Problem is in something else. Try to make a fiddle illustrating your problem.

其实你的例子{{func(param)}}工作正常:http: //jsfiddle.net/HB7LU/4418/。问题出在别的地方。尝试制作一个说明您的问题的小提琴。

回答by Mohammad Kermani

This question already has the correct answer, but this may help to understand it better.For the question "How to run/apply a function inside an Angular expression", I can introduce this way,

这个问题已经有了正确的答案,但这可能有助于更好地理解它。对于“ How to run/apply a function inside an Angular expression”这个问题,我可以这样介绍,

Assign your function to $scope.something and run that. Example:

将您的函数分配给 $scope.something 并运行它。例子:

JavaScript inside your controller:

控制器中的 JavaScript:

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

HTML (expression):

HTML(表达式):

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

You will get Hello!inside your <p>tag

你会Hello!进入你的<p>标签