0

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

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>

4

2 回答 2

1

您应该直接向您的组件提供控制器功能，而不是通过角度控制器吸气剂：

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 属性添加到您的控制器，以避免潜在的缩小问题。

于 2016-05-15T13:55:16.730 回答
0

@Sajeetharan 在这里发布了一个解决问题的答案，但他从评论中删除了它。他的回答是我应该将“.component”更改为“.directive”，因为它是 angular2 和 angular 的混合体。这是已编辑的代码。它似乎工作正常：

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

于 2016-05-15T14:33:18.540 回答