angular.js:13424 Error: [ng:areq] Argument 'fn' is not a function, got Object
Question
I'm new to programming in html/JS/AngularJS. I'm trying to implement a simple angular component but i keep getting errors. I looked at other answers and can't find the solution why this simple implementation is creating the error in the console (the error is mentioned in title). please help. picture of console out put
var myApp = angular.module('RingShopApp', []); function appctrlcontroller($scope) { } myApp.controller('appctrl', appctrlcontroller); console.log("appctrl done"); myApp.component('ringtabs', { template: "<p>sdfsdfsdfsdfsdfdf</p>", // templateUrl: 'html/Directives/tabs.html', controller: myApp.controller('appctrl') }); console.log("ringtabs component");
<!DOCTYPE html> <html > <head> </head> <body ng-app="RingShopApp"> <ringtabs></ringtabs> <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js'></script> <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.min.js'></script> <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-route.min.js'></script> <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-aria.min.js'></script> <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-messages.min.js'></script> <script src="js/index.js"></script> </body> </html>
2 answers
solution1
0 2016-05-15 13:55:16
You should be providing the controller function directly to your component instead of through the angular controller getter:
var myApp = angular.module('RingShopApp', []);
myApp.controller('appcontroller', appcontroller);
myApp.component('ringtabs', {
template: "<p>sdfsdfsdfsdfsdfdf</p>",
controller: 'appcontroller'
});
function appcontroller($scope) {
...
}
appcontroller.$inject = ['$scope'];
Be careful to add the $inject property to your controller to avoid potential problems with minification.
solution2
0 2016-05-15 14:33:18
@Sajeetharan posted an answer here that solved the problem but he deleted it from the comments. His answer was that I should change ".component" to ".directive" because it was a mixture of angular2 and of angular. This is the code that was edited. It seems to work fine:
var myApp = angular.module('RingShopApp', []); function appctrlcontroller($scope) { } myApp.controller('appctrl', appctrlcontroller) .directive('ringtabs', function(){ return { templateUrl: 'html/Directives/tabs.html' //controller: myApp.controller('appctrl') }; }); console.log("ringtabs component");
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.