Question

我是html / JS / AngularJS编程的新手。我试图实现一个简单的角度组件，但我不断收到错误。我查看了其他答案，无法找到解决方案，为什么这个简单的实现在控制台中创建错误（错误在标题中提到）。请帮忙。 picture of console out put

＆＃13;

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

＆＃13;

    <!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>

＆＃13;

Answer 1

您应该直接向组件提供控制器功能，而不是通过角度控制器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'];

小心将$ inject属性添加到控制器中，以避免缩小的潜在问题。

Answer 2

@Sajeetharan在这里发布了一个解决问题的答案，但他从评论中删除了它。他的回答是我应该改变＆＃34; .component＆＃34; to＆＃34; .directive＆＃34;因为它是角度2和角度的混合物。这是编辑过的代码。它似乎工作正常：

＆＃13;

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

＆＃13;

angular.js：13424错误：[ng：areq]参数＆＃39; fn＆＃39;不是一个函数，得到了Object

2 个答案: