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

Question

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

0

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, поэтому, пожалуйста, сделайте это простым. Я пробовал разные подходы, которые я практиковал на других языках, но никаких шансов. Большое спасибо

Najeeb Puthiyallam 30 окт. 2015, в 14:14

Источник

4

Используйте фабрику / сервис для создания вашей общей функции.
michelem 30 окт. 2015, в 12:50

Теги:

angularjs

3 ответа

1

В 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

Ron Brogan 30 окт. 2015, в 10:24

0

Как отметил @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
       } 
	});

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

Andrew Cavanagh 30 окт. 2015, в 11:44

Ещё вопросы

Используйте фабрику / сервис для создания вашей общей функции.

Sarjan Desai · Accepted Answer · 2015-10-30T10-21-00.000Z

Выполните общий метод на 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
  }
]);