[英]angular.js:13424 Error: [ng:areq] Argument 'fn' is not a function, got Object
I'm new to programming in html/JS/AngularJS. 我是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>
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. 请小心地将$ inject属性添加到您的控制器,以避免缩小的潜在问题。
@Sajeetharan posted an answer here that solved the problem but he deleted it from the comments. @Sajeetharan在这里发布了一个可以解决问题的答案,但是他从评论中删除了它。 His answer was that I should change ".component" to ".directive" because it was a mixture of angular2 and of angular. 他的回答是,我应该将“ .component”更改为“ .directive”,因为它是angular2和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");
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.