如何在角度js

Question

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

1.如何保持不同控制器的通用功能？
2.如何将通用函数绑定到绑定到不同页面字段（由不同控制器管理）的事件的侦听器，因为它们不共享范围？
感谢。

Answer 1

那是services/factories的用途。

它们提供单独的“类”，其中包含您希望在整个应用程序中共享的任何数据和功能。

例如：

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

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

工厂和服务之间存在一些细微的差别，所以你必须研究那些（这个问题有点超出了这个问题）。

Answer 2

使用工厂或服务

要在不同的控制器之间共享功能，您可以使用工厂或服务。一个例子会更好地展示

控制器＆amp;工厂

这是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>

请参阅我们可以访问范围<{p}中的info

下面将指令看作主html中的标签，您可以根据需要将其放入索引页面或任何模板中。

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

这是构建指令的基础知识，这个指令只有html和范围，但你可以使用控制器制作更复杂的指令。

学习额外注意事项

花一些时间浏览Codecademy AngularJS教程，它们是免费的，只需2晚的工作时间。他们还解释了Angular JS的所有基础知识，如指令，控制器，服务等。