$scope.isNotString = function (str) { return (typeof str !== "string"); }
是最好的方法来做到这一点,将它们添加为服务?从我已经阅读我可以做
这但是,但是我想在我的HTML页面中使用这些仍然可能如果
他们在服务?例如,我可以使用以下:
<button data-ng-click="doSomething()" data-ng-disabled="isNotString(abc)">Do Something </button>
有人可以给我一个例子,如何我可以添加这些。我应该创建一个服务
或者有一些其他的方式做。最重要的是我想要这些实用程序
函数在文件中,而不与主设置的另一部分组合。
我知道有几个解决方案,但没有一个是如此清楚。
解决方案1 – 由Urban提出
$scope.doSomething = ServiceName.functionName;
这里的问题是我有20个功能和十个控制器。如果我这样做,这意味着为每个控制器添加大量的代码。
解决方案2 – 由我提议
var factory = { Setup: function ($scope) { $scope.isNotString = function (str) { return (typeof str !== "string"); }
这样做的缺点是,在每个控制器的开始,我将有一个或多个这些安装程序调用每个通过$ scope的服务。
解决方案3 – 由Urban提出
城市提出的创建通用服务的解决方案看起来不错。这里是我的主要设置:
var app = angular .module('app',['ngAnimate','ui.router','admin','home','questions','ngResource','LocalStorageModule']) .config(['$locationProvider','$sceProvider','$stateProvider',function ($locationProvider,$sceProvider,$stateProvider) { $sceProvider.enabled(false); $locationProvider.html5Mode(true);
我应该添加通用服务到这个,我怎么能这样做?
我写了这个答案很久以前,没有一直保持很多角度一段时间,但似乎这个答案仍然相对受欢迎,所以我想指出一点点@nicolas使下面是好的。例如,注入$ rootScope并在那里附加帮助程序将使您无需为每个控制器添加它们。另外 – 我同意如果你添加的应该被认为是角服务或过滤器,他们应该以这种方式被采纳到代码。
此外,从当前版本1.4.2开始,Angular公开了一个“Provider”API,允许注入到配置块中。有关更多信息,请参阅以下资源:
https://docs.angularjs.org/guide/module#module-loading-dependencies
AngularJS dependency injection of value inside of module.config
我不认为我会更新下面的实际代码块,因为我真的不积极使用Angular这些天,我不真的想危害一个新的答案,而不感到舒适,它实际上符合新的最佳实践。如果有人感觉到它,一切手段去它。
编辑2/3/14:
在考虑了这一点,并阅读了一些其他的答案,我实际上认为我喜欢由@Brent Washburne和@Amogh Talpallikar提出的方法的变化。特别是如果你正在寻找像isNotString()或类似的实用程序。这里的一个明显优势是,您可以在角码之外重复使用它们,并且您可以在您的配置函数(您不能使用服务)中使用它们。
话虽如此,如果你正在寻找一个通用的方式来重新使用什么应该是正确的服务,老的答案,我认为仍然是一个好的。
我现在要做的是:
app.js:
var MyNamespace = MyNamespace || {}; MyNamespace.helpers = { isNotString: function(str) { return (typeof str !== "string"); } }; angular.module('app',['app.controllers','app.services']). config(['$routeProvider',function($routeProvider) { // Routing stuff here... }]);
controller.js:
angular.module('app.controllers',[]). controller('firstCtrl',['$scope',function($scope) { $scope.helpers = MyNamespace.helpers; });
然后在你的部分,你可以使用:
<button data-ng-click="console.log(helpers.isNotString('this is a string'))">Log String Test</button>
旧答案如下:
最好将它们作为服务包括在内。如果你要在多个控制器上重复使用它们,包括它们作为一个服务,将使你不必重复代码。
如果你想在你的html partial中使用服务函数,那么你应该将它们添加到控制器的范围:
$ scope.doSomething = ServiceName.functionName;
然后在你的部分,你可以使用:
<button data-ng-click="doSomething()">Do Something</button>
这里有一个方法,你可以保持这一切有组织,免费太多的麻烦:
将您的控制器,服务和路由代码/ config分成三个文件:controllers.js,services.js和app.js.顶层模块是“app”,它有app.controllers和app.services作为依赖。然后app.controllers和app.services可以声明为自己文件中的模块。这个组织结构只是从Angular Seed:
app.js:
angular.module('app',function($routeProvider) { // Routing stuff here... }]);
services.js:
/* Generic Services */ angular.module('app.services',[]) .factory("genericServices",function() { return { doSomething: function() { //Do something here },doSomethingElse: function() { //Do something else here } });
controller.js:
angular.module('app.controllers','genericServices',function($scope,genericServices) { $scope.genericServices = genericServices; });
然后在你的部分,你可以使用:
<button data-ng-click="genericServices.doSomething()">Do Something</button> <button data-ng-click="genericServices.doSomethingElse()">Do Something Else</button>