Вызов функции внутри контроллера от другого контроллера - AngularJS

Question

app.config(function($routeProvider) { 
 

 
    $routeProvider 
 
    .when('/skills', { 
 
     templateUrl: 'skill.html', 
 
     controller: 'SkillThemeCtrl' 
 
    }) 
 
    .when('/exp', { 
 
     templateUrl: 'exp.html', 
 
     controller: 'ExpThemeCtrl' 
 
    }) 
 
    .when('/', { 
 
     redirectTo: '/skills' 
 
    }) 
 
    .otherwise({ 
 
     template: '<h1>404</h1>' //or templateUrl: '<h1>404</h1>' 
 
    }); 
 
}); 
 

 

 
app.controller('ThemeCtrl', ['$http', 
 
    function($http) { 
 
    var ctrl = this; 
 
    ctrl.updateTheme = function(getTab) { 
 

 
    } 
 
    } 
 
]); 
 

 
app.controller('SkillThemeCtrl', function() { 
 
    updateTheme(1); //This is not working. This function is in ThemeCtrl 
 
}); 
 

 
app.controller('ExpThemeCtrl', function() { 
 
    updateTheme(2); //This is not working. This function is in ThemeCtrl 
 
});

Я хочу получить доступ к функции, которая определяется внутри контроллера от другого контроллера. Я просто изучаю Angular, поэтому, пожалуйста, сделайте это простым. Я пробовал разные подходы, которые я практиковал на других языках, но никаких шансов. Спасибо alot

Answer 1

Сделать общий метод в factory и inject его в контроллер, где требуется, и вызов factory метод в контроллере.

Узнайте о заводе и providers

app.factory('ThemeFactory', function() { 

    return { 
    updateTheme: updateTheme 
    }; 

    function updateTheme(getTab) { 
    // DO something common here 
    } 
}); 

app.controller('ThemeCtrl', ['$http', 'ThemeFactory', 
    function($http, ThemeFactory) { 
    var ctrl = this; 
    ctrl.updateTheme = ThemeFactory.updateTheme; 
    } 
]); 

app.controller('SkillThemeCtrl', ['ThemeFactory', 
    function(ThemeFactory) { 
    ThemeFactory.updateTheme(1); //This is not working. This function is in ThemeCtrl 
    } 
]); 

app.controller('ExpThemeCtrl', ['ThemeFactory', 
    function(ThemeFactory) { 
    ThemeFactory.updateTheme(2); //This is not working. This function is in ThemeCtrl 
    } 
]); 

Answer 2

Как отметил @michelemen в своем комментарии, вы хотите, чтобы общие методы были на заводе или в сервисе, которые вы вводите в свой контроллер. You код может выглядеть примерно так:

\t app.config(function($routeProvider) { 
 

 
\t $routeProvider 
 
\t  .when('/skills', { 
 
\t  templateUrl: 'skill.html', 
 
\t  controller: 'SkillThemeCtrl' 
 
\t  }) 
 
\t  .when('/exp', { 
 
\t  templateUrl: 'exp.html', 
 
\t  controller: 'ExpThemeCtrl' 
 
\t  }) 
 
\t  .when('/', { 
 
\t  redirectTo: '/skills' 
 
\t  }) 
 
\t  .otherwise({ 
 
\t  template: '<h1>404</h1>' //or templateUrl: '<h1>404</h1>' 
 
\t  }); 
 

 
\t }); 
 

 

 
\t app.controller('ThemeCtrl', ['$http', 'SkillThemeService', 
 
\t function($http, SkillThemeService) { 
 

 
\t  var ctrl = this; 
 
\t //then use the function like this: 
 
     SkillThemeService.updateTheme(); 
 

 

 
\t } 
 
\t ]); 
 

 

 
\t app.factory('SkillThemeCtrl', function() { 
 
     return { 
 
     updateTheme: updateTheme 
 
     } 
 
\t function updateTheme(){ 
 
     //do stuff here 
 
     } 
 
\t });

Пожалуйста, обратите внимание, что код выше только для примера, я не проверял, чтобы убедиться, что это 100% точным или правильным.

Answer 3

В Угловом, каждый контроллер имеет свой собственный $ scope. Он не может видеть области других контроллеров (за исключением некоторых конкретных сценариев). У вас есть два варианта: фабрика/сервис или использование структуры событий.

Для фабрики/службы это работает, потому что служба имеет один экземпляр, который используется совместно с приложением, поэтому вы можете вызвать ту же функцию (которая имеет доступ к нужным данным) из любого места в вашем приложении.

Идея мероприятия может быть лучше подходит для вас, и это довольно просто. В контроллере вы хотите позвонить, вы можете настроить

$scope.$on("eventName", function() {}); 

Это будет вызывать функцию каждый раз, когда сфера получить это мероприятие под названием «именем_события»

Вы можете создать это событие на $ вещание его или $, испускающего его, в зависимости от вашей иерархии. Вы также можете использовать $ rootScope как автобус событий, а также слушать и испускают на что:

//In receiving controller 
$rootScope.$on("eventName", function() { 
//do stuff here 
}); 


//In calling controler 
$rootScope.$emit("eventName"); 

Хорошая информация о событиях можно найти здесь: Working with $scope.$emit and $scope.$on