在 AngularJS 视图中使用 jQuery 插件

Question

我正在做我的第一个 AngularJS 项目。到目前为止我很喜欢它，但我现在挂了。

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

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

{{ find.addDate }}

我已经在 index.html 中包含了带有脚本标记的插件，我认为从那里开始它就像在我的模板/部分中做这样的事情一样简单：

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

或许：

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

这不起作用（我相信你们中的一些人很清楚为什么），但控制台中没有错误，我很困惑如何处理它。我已经使用“angular 中的第三方脚本”或“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") }} 时，angular 会查找不存在的 $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"}}