在AngularJS视图中使用jQuery插件

Question

我正在开发我的第一个AngularJS项目.到目前为止,我喜欢它,但我现在已经挂了.

我的项目是结构化的,所以我在我的index.html中有一个单独的ng-view,它根据当前路由填充了单独的HTML模板/部分.

在其中一个部分中,我想使用jQuery DateFormat插件来格式化一个SQLite日期时间字符串,该字符串使用角度表达式解析为模板/部分:

{{ find.addDate }}

我已经在index.html中添加了带有脚本标记的插件,我想从那里开始就像在我的模板/部分中做这样的事情一样简单:

{{ $.format.date(find.addDate, "dd/MM/yyyy") }}

或者可能:

{{ angular.element.format.date(find.addDate, "dd/MM/yyyy") }}

这不起作用(我确定这对你们中的一些人来说显而易见),但是控制台中没有错误,我对如何处理它感到非常困惑.我已经用"角度第三方脚本"或"jquery插件angularjs"等术语完成了一些谷歌搜索,但是找不到最近的代码示例,说明如何以正确的方式完成此操作.

我确实找到了一些使用angular.widget的旧代码,但似乎已经在1.0+版本中弃用了.我想我需要使用一个指令,但我无法弄明白.

我真的希望得到一个解释或简单的例子.非常感谢!

Answer 1

问题是当你在模板中执行{{expression}}时,它会在当前范围内对其进行评估.

例如,如果您有此控制器:

function MyCtrl($scope) {
    $scope.find = {
        addDate: 2030
    };
}

{{find.addDate}}实际上会寻找$scope.find.addDate并评估它(在这种情况下返回2030).

所以当你尝试做的时候{{ $.format.date(find.addDate, "dd/MM/yyyy") }},角度寻找 $scope.$.format.date(find.addDate, "dd/MM/yyyy"),这是不存在的.

使用控制器中的函数尝试这样的事情:

   function MyCtrl($scope) {
        $scope.find = {
            addDate: 2030
        };
        $scope.formatDate = function(input, format) {
            return $.format.date(input, format);
        }
    }

然后你可以用你的html做:{{formatDate(find.addDate, "dd/MM/yyyy")}}.

您还可以将其评估为标记中的过滤器,因为它只需要输入并更改它: {{find.addDate | formatDate:"dd/MM/yyyy"}}