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>
标记中)