AngularJS 从另一个控制器调用一个函数

Question

我想调用一个函数或更改另一个控制器内部的变量/s 的值。我在网上查找了解决方案并了解到我必须创建一个 service 并在两个控制器中使用它，但是我无法理解 service 如何访问 $scope.home_main 和 $scope.home_main 变量为他们在不同的scope。

JS

 app.controller('Controller1', function ($scope, $window) {
     $scope.toggle = function() {
         $scope.home_main = !$scope.home_main;
         $scope.full_page_place_holder = !$scope.full_page_place_holder;
     };
 });

app.controller('Controller2', function ($scope, $window) {
    $scope.onTabSelect=function(){
    // here I want to call toggle function which is inside another controller.
    };

});

更新的 HTML

<div ng-controller="Controller1">
    <div ng-hide="home_main"></div>
</div>

<div ng-controller="Controller2">
    <div ng-hide="full_page_place_holder"></div>
</div>

看过这里：SO-Q1，SO-Q2。谢谢。

Answer 1

您可以按如下方式创建服务，

angular.module('someApp').service('shareDataService', function() {

    var popup;

    var setDetails = function(param) {
        popup = param;
    };

    var getDetails = function() {
        return popup;
    };

    return {
        setDetails: setDetails,
        getDetails: getDetails,
    };
});

此服务将无法访问两个控制器的 $scope 变量，您可以调用 getDetails 和 setDetails 来获取和设置服务中的变量。

假设您想将 'home_main' 的值从控制器 1 发送到控制器 2，在控制器 1 中，您调用服务函数 setDetails

 app.controller('Controller1', function ($scope, $window, shareDataService) {
     $scope.toggle = function() {
         $scope.home_main = !$scope.home_main;
         $scope.full_page_place_holder = !$scope.full_page_place_holder;
         shareDataService.setDetails($scope.home_main);     
     };
 });

在controller2中，你通过调用服务来获取值

app.controller('Controller2', function ($scope, $window) {

    var home_main_value = shareDataService.getDetails();
});

你也可以对函数做类似的事情..... 希望对你有帮助

Answer 2

您误解了概念服务将有一个变量将由两个控制器共享：- $scope 是控制器本地的，不能被另一个控制器访问：-

FOR 示例：-

myApp.factory('Data', function () {

    var data = {
        home_main : ''
    };

    return {
        gethome_main : function () {
            return data.home_main ;
        },
        sethome_main : function (home_main ) {
            data.home_main  = home_main ;
        }
    };

myApp.controller('FirstCtrl', function ($scope, Data) {

    $scope.home_main= '';

    $scope.$watch('home_main', function (newValue, oldValue) {
        if (newValue !== oldValue) Data.sethome_main(newValue);
    });
});

myApp.controller('SecondCtrl', function ($scope, Data) {

    $scope.$watch(function () { return Data.gethome_main(); }, function (newValue, oldValue) {
        if (newValue !== oldValue) $scope.home_main= newValue;
    });
});