如何在angular js中跨控制器共享功能

Question

我是Angular.js的新手。
我有一個應用程序，其中包含幾個帶有不同頁面的標簽。 每個頁面由不同的控制器維護以管理自己的數據。 我的疑問是，如何在不同頁面（控制器）之間使用相同的功能。 例如，不同頁面的字段將具有相同的驗證功能，格式化功能和許多其他util功能。

1.如何維護不同控制器之間共有的功能？
2.如何將作為偵聽器的公用功能綁定到綁定到不同頁面的字段（由不同控制器管理）的事件，因為它們不共享作用域？
謝謝。

Answer 1

那是什么服務/工廠 。

它們提供單例“類”，其中包含要在應用程序中共享的任何數據和功能。

例如：

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

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

工廠和服務之間存在一些細微的差異，因此您必須研究它們（這超出了此問題的范圍）。

Answer 2

使用工廠或服務

要在不同控制器之間共享功能，可以使用工廠或服務。 一個例子可以更好地說明這一點

控制器與工廠

這是來自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的所有基礎知識，例如指令，控制器，服務等。