AngularJs函数在整个应用程序中可用_Angularjs

AngularJs函数在整个应用程序中可用

angularjs

AngularJs函数在整个应用程序中可用,angularjs,Angularjs,我正在用AngularJs制作一个应用程序，我面临一个需要在多个视图中调用相同函数的情况在本例中，它是一个存储系统，在该系统中，同一个存储可以在多个视图中可见。在家里，如果它靠近用户，在付费广告中，在搜索结果中，等等我知道这个函数应该在服务中，我已经这样做了。但问题是：我应该如何从view/html调用这个函数我希望避免在多个控制器中反复重新定义相同的调用，但直到现在，还没有发现与此特定问题相关的任何内容这是我的代码： function mainFactory($http) {

我正在用AngularJs制作一个应用程序，我面临一个需要在多个视图中调用相同函数的情况

在本例中，它是一个存储系统，在该系统中，同一个存储可以在多个视图中可见。在家里，如果它靠近用户，在付费广告中，在搜索结果中，等等

我知道这个函数应该在服务中，我已经这样做了。但问题是：我应该如何从view/html调用这个函数

我希望避免在多个控制器中反复重新定义相同的调用，但直到现在，还没有发现与此特定问题相关的任何内容

这是我的代码：

function mainFactory($http) {
    var service = {
        addFav: _addFav
    };
    return service;

    function _addFav(data, func) {
        return $http.post(baseUrl+func,data).then( 
            function(res) {return res.data;},
            function(err) {alert(_errorMsg);}
        );
    };
}

function HomeController() {
    vm.addFavorites = addFavorites;
    function addFavorites(data) {
        var func = 'function_name';
        mainFactory.addFav(data,func);
    }
}

function AdvController() {
    vm.addFavorites = addFavorites;
    function addFavorites(data) {
        var func = 'function_name';
        mainFactory.addFav(data,func);
    }
}

function SearchController() {
    vm.addFavorites = addFavorites;
    function addFavorites(data) {
        var func = 'function_name';
        mainFactory.addFav(data,func);
    }
}

如您所见，我需要在多个控制器中调用相同的函数

我已经看到了一些其他示例，它们说要从.run中将此函数用作$rootScope函数，但也有更多内容警告将函数定义为根函数不是一种好的做法

有没有关于如何解决这个问题的建议

编辑：

我现在使用的另一个解决方案是通过指令在body标签中定义一个“MainController”，这样我就可以在整个应用程序中使用这个函数。但是这个控制器的维护越来越复杂，有很多功能/过程

我应该如何从view/html调用此函数

您不应该直接从视图中执行此操作

但是，您可以将控制器嵌套到其他控制器中。因此，如果您认为您的函数应该是一个“特殊”函数，那么您可以使用以下“场景”

html:

<div ng-controller="appController as app">
    <div ng-controller="HomeController as home"> 
         <button ng-click="app.addFavorites();"></button>
    </div>

    <!-- ... -->
</div>

如果您将appController远离“内部视图”，这也可以与SPA一起使用。请随意给这个“appController”取另一个名字（我的有点糟糕）

我应该如何从view/html调用此函数

您不应该直接从视图中执行此操作

但是，您可以将控制器嵌套到其他控制器中。因此，如果您认为您的函数应该是一个“特殊”函数，那么您可以使用以下“场景”

html:

<div ng-controller="appController as app">
    <div ng-controller="HomeController as home"> 
         <button ng-click="app.addFavorites();"></button>
    </div>

    <!-- ... -->
</div>

如果您将appController远离“内部视图”，这也可以与SPA一起使用。请随意给这个“appController”取另一个名字（我的有点糟糕）。

假设你有这样一个应用程序：

<html ng-app="app">

<body ng-controller="MainController">

<div ui-view></div>

</body>
</html>

然后，您可以在任何控制器中使用MyService，也可以在同一应用程序中的任何视图中使用addToFav

<a ng-click="addToFav(...)"></a>

在您看来，您可以使用：

vm.product.item以访问当前项

vm.product.list以访问所有项目

将所有相关数据和方法保存在一个组件中，并在不同的控制器中重复使用

那么为什么不使用angular service或factory，因为它们都是单例的，是的，我们可以同时使用这两种，其思想是构建组件，并重复使用它，而不仅仅是使用controller假设您有这样一个应用程序：

<html ng-app="app">

<body ng-controller="MainController">

<div ui-view></div>

</body>
</html>

然后，您可以在任何控制器中使用MyService，也可以在同一应用程序中的任何视图中使用addToFav

<a ng-click="addToFav(...)"></a>

在您看来，您可以使用：

vm.product.item以访问当前项

vm.product.list以访问所有项目

将所有相关数据和方法保存在一个组件中，并在不同的控制器中重复使用

那么为什么不使用angular service或factory，因为它们都是单例的，是的，我们可以同时使用它们，其思想是构建组件，并重用它，而不仅仅是使用控制器

我不认为服务是答案，在$scope顶部定义函数就可以了，$scope.foo=function（）{}，然后在你的观点中使用它，就像我的问题是不同的，我已经看到了这个主题。但我要避免的是在每个控制器中重新调用函数。我想在一个控制器中定义它，并且能够在多个视图中调用它。您必须在某个地方声明它，并注入rootScope或您的服务依赖项。另一个解决方案是非角度解决方案，在JS文件上创建一个基本函数，并在页面中添加此文件，但我甚至不确定在这种情况下是否可以从HTML视图调用它。不幸的是，我看不到任何其他方式。如果您使用“父”控制器，这里的问题是您需要为每个视图管理多个控制器，不建议这样做。我不认为服务是答案，在$scope顶部定义函数就可以了，$scope.foo=function（）{}，然后在视图中使用它，就像我的问题不同一样，我已经看到了这个主题。但我要避免的是在每个控制器中重新调用函数。我想在一个控制器中定义它，并且能够在多个视图中调用它。您必须在某个地方声明它，并注入rootScope或您的服务依赖项。另一个解决方案是非角度解决方案，在JS文件上创建一个基本函数，并在页面中添加此文件，但我甚至不确定在这种情况下是否可以从HTML视图调用它。不幸的是，我看不到任何其他方式。如果您使用“父”控制器，这里的问题是，您需要在每个视图中管理多个控制器，但不建议这样做。这是我目前所拥有的。但在我的例子中，我有多个部分需要做同样的事情。所以我的主控制器越来越大，有很多功能。所以我期待着优化这个。但是这是一个很好的方法，如果我找不到其他的解决办法，这就是我现在所拥有的。但在我的例子中，我有多个部分需要做同样的事情。所以我的主控制器越来越大，有很多功能。所以我期待着优化这个。但如果我找不到其他解决方案，这是一个很好的方法