調用從另一個控制器控制器內部的功能 - AngularJS

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，所以請簡單點。我嘗試了不同的方法，我正在練習其他語言，但沒有機會。非常感謝

來源

2015-10-30 Najeeb Puthiyallam

使用工廠/服務建立自己的共同作用。 –

做一個常用的方法在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 
    } 
]);

來源

2015-10-30 13:13:50

正如@michelemen在他的評論中指出的那樣，你希望共享方法在你注入到你的控制器的工廠或服務中。你的代碼可能看起來像：

\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％準確或正確。

來源

2015-10-30 13:11:25

在Angular中，每個控制器都有自己的$範圍。它看不到其他控制器的作用域（除了在某些特定情況下）。你基本上有兩個選擇：工廠/服務或使用事件結構。

對於工廠/服務，它的工作原理是服務有一個實例在應用程序中共享，因此您可以在應用程序的任何位置調用相同的功能（可訪問正確的數據）。

事件的想法可能會更適合你，這很簡單。在你的控制器，你想打電話，你可以設置一個

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

這將每一個範圍得到的時間調用一個函數稱爲事件「eventName的」

您可以創建此事件由$廣播，或$發射它，這取決於你的層次結構。你也可以使用$ rootScope作爲一個事件總線，並聽取和發射上：

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


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

上的事件良好的信息可以在這裏找到：Working with $scope.$emit and $scope.$on

來源

2015-10-30 13:12:17

調用從另一個控制器控制器內部的功能 - AngularJS

回答

相關問題