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, поэтому, пожалуйста, сделайте это простым. Я пробовал разные подходы, которые я практиковал на других языках, но никаких шансов. Большое спасибо
Выполните общий метод на factory
и inject
его в контроллер, где это необходимо, и вызовите factory
метод в контроллере.
Узнайте о фабрике и поставщиках
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
}
]);
В Angular каждый контроллер имеет свой собственный объем. Он не может видеть другие области контроллера (за исключением некоторых конкретных сценариев). У вас есть два варианта: фабрика/сервис или использование структуры событий.
Для фабрики/службы это работает, потому что у службы есть один экземпляр, который используется в приложении, поэтому вы можете вызывать одну и ту же функцию (которая имеет доступ к нужным данным) из любого места в вашем приложении.
Идея события может быть лучше подходит для вас, и это довольно просто. В своем контроллере, который вы хотите вызвать, вы можете настроить
$scope.$on("eventName", function () {});
Это вызовет функцию каждый раз, когда область получит событие с именем eventName,
Вы можете создать это событие через $ broadcasting it или $ emiting it, в зависимости от вашей иерархии. Вы также можете использовать $ rootScope как шину событий, и слушать и испускать это:
//In receiving controller
$rootScope.$on("eventName", function () {
//do stuff here
});
//In calling controler
$rootScope.$emit("eventName");
Хорошую информацию о событиях можно найти здесь: Работа с $ scope. $ Emit и $ scope. $ On
Как отметил @michelemen в своем комментарии, вы хотите, чтобы общие методы находились на фабрике или сервисе, которые вы вводите в контроллер. Код может выглядеть примерно так:
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', 'SkillThemeService',
function($http, SkillThemeService) {
var ctrl = this;
//then use the function like this:
SkillThemeService.updateTheme();
}
]);
app.factory('SkillThemeCtrl', function() {
return {
updateTheme: updateTheme
}
function updateTheme(){
//do stuff here
}
});