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
});

我想访问一个从另一个Controller在Controller内定义的Function。我只是在学习Angular，所以请简单一点。我试过不同的方法，我用其他语言练习，但根本没有机会。非常感谢

Answer 1

在Angular中，每个控制器都拥有自己的$ scope。它无法看到其他控制器的范围（某些特定情况除外）。您基本上有两个选择：工厂/服务或使用事件结构。

对于工厂/服务，它的工作原理是因为该服务有一个在应用程序中共享的实例，因此您可以从应用程序的任何位置调用相同的功能（可以访问正确的数据）。

活动创意可能更适合您，而且非常简单。在您想要呼叫的控制器中，您可以设置

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

每当示波器获得一个名为＆＃39; eventName＆＃39;

的事件时，这将调用一个函数

您可以通过$ broadcast it或$ emitting来创建此事件，具体取决于您的层次结构。你也可以使用$ rootScope作为事件总线，然后监听并发出：

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


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

有关事件的详细信息，请访问：Working with $scope.$emit and $scope.$on

Answer 2

正如@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％准确或正确的。

Answer 3

在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
  }
]);

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

3 个答案: