我可以在每个控制器的角度可用的功能？

如果我有一个实用函数 foo，我希望能够从任何地方调用我的 ng-app声明。有没有什么办法可以使它在我的模块设置全局访问，或者我需要添加到每个控制器的作用域？

145708 次浏览
小开
最佳答案

您基本上有两个选项，要么将其定义为服务，要么将其放在根作用域中。我建议您使用它进行服务，以避免污染根作用域。您创建一个服务，并使其在您的控制器中可用，如下所示:

<!doctype html>
<html ng-app="myApp">
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.angularjs.org/1.1.2/angular.min.js"></script>
<script type="text/javascript">
var myApp = angular.module('myApp', []);


myApp.factory('myService', function() {
return {
foo: function() {
alert("I'm foo!");
}
};
});


myApp.controller('MainCtrl', ['$scope', 'myService', function($scope, myService) {
$scope.callFoo = function() {
myService.foo();
}
}]);
</script>
</head>
<body ng-controller="MainCtrl">
<button ng-click="callFoo()">Call foo</button>
</body>
</html>

如果这不是您的选项，您可以像下面这样将其添加到根作用域:

<!doctype html>
<html ng-app="myApp">
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.angularjs.org/1.1.2/angular.min.js"></script>
<script type="text/javascript">
var myApp = angular.module('myApp', []);


myApp.run(function($rootScope) {
$rootScope.globalFoo = function() {
alert("I'm global foo!");
};
});


myApp.controller('MainCtrl', ['$scope', function($scope){


}]);
</script>
</head>
<body ng-controller="MainCtrl">
<button ng-click="globalFoo()">Call global foo</button>
</body>
</html>

这样，您的所有模板都可以调用 globalFoo()，而不必将它从控制器传递给模板。

小开

虽然第一种方法被提倡为“角度相似”的方法，我觉得这增加了开销。

考虑是否要在10个不同的控制器中使用 myservice.foo 函数。我必须在所有十个属性中指定这个“ myService”依赖项，然后指定 $scope.calFoo 范围属性。这只是一个简单的重复，在某种程度上违反了 DRY 原则。

然而，如果我使用 $rootScope 方法，我只指定这个全局函数 gobalFoo 一次，并且它将在我未来的所有控制器中可用，不管有多少个控制器。

小开

我想你也可以把它们结合起来:

<!doctype html>
<html ng-app="myApp">
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.angularjs.org/1.1.2/angular.min.js"></script>
<script type="text/javascript">
var myApp = angular.module('myApp', []);


myApp.factory('myService', function() {
return {
foo: function() {
alert("I'm foo!");
}
};
});


myApp.run(function($rootScope, myService) {
$rootScope.appData = myService;
});


myApp.controller('MainCtrl', ['$scope', function($scope){


}]);


</script>
</head>
<body ng-controller="MainCtrl">
<button ng-click="appData.foo()">Call foo</button>
</body>
</html>
小开

AngularJs 有“ 服务”和“ 工厂”，只是为了解决像你这样的问题。这些是用来有一些全局 控制器，指令，其他服务或任何其他 angularjs 组件之间。.您可以定义函数、存储数据、在 服务中创建计算函数或任何您想要的东西，并在 AngularJs 组件中使用它们作为 全球化.like

angular.module('MyModule', [...])
.service('MyService', ['$http', function($http){
return {
users: [...],
getUserFriends: function(userId){
return $http({
method: 'GET',
url: '/api/user/friends/' + userId
});
}
....
}
}])

如果你还需要的话

更多关于为什么我们需要 AngularJs 服务和工厂

小开

我是一个比较新的 Angular，但我发现有用的(非常简单)是，我做了一个全局脚本，我加载到我的页面之前的本地脚本与全局变量，我需要访问所有页面。在该脚本中，我创建了一个名为“ globalfunction”的对象，并添加了需要作为属性进行全局访问的函数。例如 globalFunctions.foo = myFunc();。然后，在每个本地脚本中，我编写了 $scope.globalFunctions = globalFunctions;，并且可以立即访问在全局脚本中添加到 globalfunction 对象中的任何函数。

这是一个有点变通，我不知道它能否帮助你，但它肯定帮助了我，因为我有许多功能，这是一个痛苦添加到每个页面的所有他们。


提交答案