如何在angular js中跨控制器共享函数

how to share functions across controllers in angular js

本文关键字：控制器 共享 函数 js angular      更新时间：2023-09-26

我是Angular.js的新手。我有一个应用程序，其中包含几个标签与不同的页面。每个页面由不同的控制器维护，以管理自己的数据。我的疑问是，如何在不同的页面(控制器)上使用相同的功能。例如,不同页面的字段将具有相同的验证函数、格式化函数和许多其他util函数。

1。如何维护跨不同控制器的通用功能?
2.如何将公共函数作为侦听器绑定到绑定到不同页面(由不同控制器管理)的字段的事件，因为它们不共享作用域?
谢谢。

使用Factory或Service

要在不同的控制器之间共享函数，可以使用工厂或服务。一个示例将更好地展示

控制器,工厂

这是Angular JS文档中的一个例子。工厂可以在任何被注入函数的地方使用。

angular.
module('myServiceModule', []).
controller('MyController', ['$scope','notify', function ($scope, notify) {
   $scope.callNotify = function(msg) {
     notify(msg);
   };
}]).
factory('notify', ['$window', function(win) {
  var msgs = [];
  return function(msg) {
    msgs.push(msg);
    if (msgs.length == 3) {
      win.alert(msgs.join("'n"));
      msgs = [];
    }
  };
}]);

在控制器上的函数中有一个notify的注入，如果你愿意，可以在另一个控制器中调用。

指令

你还应该看看指令，它们让你编写自己的html标签或属性。这些可以在不同的页面上重用。

例子指令

下面是实际的指令代码

app.directive('appInfo', function() { 
  return { 
    restrict: 'E', 
    scope: { 
      info: '=' 
    }, 
    templateUrl: 'js/directives/appInfo.html' 
  }; 
});

restrict: E表示它将被用作元素而不是属性。

scope列出了元素可用的不同作用域。

templateUrl此链接到您存储html片段的位置。

这是指令的html片段

<img class="icon" ng-src="{{ info.icon }}"> 
<h2 class="title">{{ info.title }}</h2> 
<p class="developer">{{ info.developer }}</p> 
<p class="price">{{ info.price | currency }}</p>

看到我们有访问info范围

下面的指令在我们的主html中作为一个标签，你可以把它放入索引页或任何你的模板中，只要你喜欢。

<div class="card"> 
  <app-info info="move"></app-info> 
</div>

这是构建指令的基础，这个指令只有html和作用域，但是你可以用控制器来创建更复杂的指令。

学习额外注意事项

花点时间去看看Codecademy AngularJS教程，它们是免费的，只需要2个晚上的工作。它们还解释了Angular JS的所有基础知识，比如指令、控制器、服务等。

这就是服务/工厂的作用。

它们提供了单例"类"，其中包含你想在整个应用中共享的任何数据和函数。

例如:

app.factory('myService', function() {
  return {
    doSomethingCool: doSomethingCool
  };
});
app.controller('myController', function(myService) {
  myService.doSomethingCool();
});

工厂和服务之间有一些细微的区别，所以你必须研究一下这些(这有点超出了这个问题的范围)。

相关文章：