Question

Angular新手在这里。我试图理解在开发Angular应用程序时使用的范例，这样我就可以使用外部库，同时保持Angular应用程序的可重用性。

想象一下，我有form使用ng-submit：

<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内的函数，而不是外部函数。那么在不将其加入模型的情况下，将我的Angular代码调用其他Javascript代码的正确方法是什么？

Answer 1

这个问题与this question about making lodash available in templates非常相似。有许多方法可以将外部（或应用内）代码或数据结构添加到Angular范围。我更喜欢单独为每个范围添加特殊用途的内容，general-purpose utilities (such as lodash or momentjs) globally：

app
.run(['$rootScope', function($rootScope) {
    $rootScope._ = _;
    $rootScope.moment= moment;

    // or:
    // $rootScope.util = {
    //      _: _,
    //      moment: moment
    // };
});

Answer 2

如果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>标记中）

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

2 个答案: