将角度代码与外部代码混合的正确范例

Correct paradigm for mixing angular code with external code

本文关键字：代码 范例 混合 外部      更新时间：2023-09-26

Angular Newbie here. 我正在尝试了解开发 Angular 应用程序时使用的范例，以便我可以使用外部库，同时保持 Angular 应用程序的可重用性。

所以想象一下，我有一个使用 ng-submit 的form：

<form ng-submit="submit()">...<!--code goes here --></form>

然后在相应的ng-app和ng-controller中（假设它们是在父元素中声明的），我得到了我的submit函数。 但是说，仅在此页面上，我想在提交后使用自定义警报库：

$scope.submit = function(){
// code goes here to submit form data
//now tell the user that save was successful
customAlertLibrary.alert("your data has been saved")
}

现在这不是可重用的代码，是吗？ 我可能希望在另一个页面上重复使用此ng-app来修改和提交数据，但不想使用自定义警报库。 您似乎被困住了，因为 ng-submit 属性将您限制为相应ng-app内的函数，而不是外部函数。 那么，在不将其烘焙到模型中的情况下，在调用其他Javascript代码的同时调用其他Javascript代码的正确方法是什么？

这个问题与关于在模板中提供lodash的问题非常相似。有许多方法可以将外部（或应用内）代码或数据结构添加到 Angular 示波器。我更喜欢单独向每个范围添加专用的东西，并全局添加通用实用程序（例如 lodash 或 momentjs）：

app
.run(['$rootScope', function($rootScope) {
    $rootScope._ = _;
    $rootScope.moment= moment;
    // or:
    // $rootScope.util = {
    //      _: _,
    //      moment: moment
    // };
});

如果customAlertLibrary对你的应用程序不重要，我会说做这样的事情

$scope.submit = function(){
  // code goes here to submit form data
  //now tell the user that save was successful
  if ($window.customAlertLibrary) {
    customAlertLibrary.alert("your data has been saved");
  }
}

否则，我建议使用 Bower 来管理依赖项。使用 Bower 安装包，你自己的应用可以是其他应用包含和安装的包。您的应用的任何依赖项也会安装（用户仍必须将其包含在自己的 <script> 标记中）

相关文章：