2015-06-14 40 views
1

我正在學習角度,當我在學習自定義指令時,我陷入了一個我不知道如何解決的情況。這裏是我的自定義direcives:角度指令,需要另一個指令,使用屬性定義的控制器

/** 
 
* Created by Lucas on 11/06/2015. 
 
*/ 
 
'use strict' 
 

 
eventsApp 
 

 
    .directive('greeting',function() { 
 
     return { 
 
      restrict: 'E', 
 
      replace: true, 
 
      template: "<button class='btn' ng-click='sayHello()'>Say Hello</button>", 
 
      controller: function GreetingController($scope) { 
 
       var greetings = ['hello']; 
 
       $scope.sayHello = function() { 
 
        alert(greetings.join()); 
 
       } 
 
       this.addGreeting = function(greeting) { 
 
        greetings.push(greeting); 
 
       } 
 
      } 
 
     }; 
 
    }) 
 
    .directive('finnish',function() { 
 
     return { 
 
      restrict: 'A', 
 
      require: 'greeting', 
 
      link: function(scope, element, attrs, controller) { 
 
       controller.addGreeting('hei'); 
 
      } 
 
     } 
 
    }) 
 
    .directive('hindi',function() { 
 
     return { 
 
      restrict: 'A', 
 
      require: 'greeting', 
 
      link: function(scope, element, attrs, controller) { 
 
       controller.addGreeting('नमस्ते'); 
 
      } 
 
     } 
 
    });

這些指令做工精細,但是,如果我改變greeting控制器通過這樣一個屬性接收外部控制器:

.directive('greeting',function() { 
 
     return { 
 
      restrict: 'E', 
 
      replace: true, 
 
      template: "<button class='btn' ng-click='sayHello()'>Say Hello</button>", 
 
      controller: '@', 
 
      name: 'ctrl' 
 
     }; 
 
    })

and mak在HTML EA參考這樣的:

<!DOCTYPE html> 
 
<html ng-app="eventsApp"> 
 
<head lang="en"> 
 
<meta charset="UTF-8"> 
 
<title>Event Registration</title> 
 
<link rel="stylesheet" href="css/bootstrap.min.css"/> 
 
<link rel="stylesheet" href="css/app.css"/> 
 
</head> 
 
<body> 
 
<greeting ctrl="GreetingController"> 
 
    <div finnish hindi></div> 
 
</greeting> 
 

 
<script src="lib/jquery.min.js"></script> 
 
<script src="lib/angular/angular.js"></script> 
 
<script src="lib/angular/angular-resource.js"></script> 
 
<script src="lib/angular/angular-route.min.js"></script> 
 
<script src="lib/underscore-1.4.4.min.js"></script> 
 
<script src="js/app.js"></script> 
 
<script src="js/controllers/GreetingController.js"></script> 
 
<script src="js/directives/greeting.js"></script> 
 
<script src="js/filters.js"></script> 
 
<script src="lib/bootstrap.min.js"></script> 
 
</body> 
 
    </html>

的其他指令停止工作,角日誌以下錯誤:

錯誤:[$編譯:ctreq]控制器 '問候' ,由指令'hindi'所需,無法找到!

我想有一種方法可以解決這個問題,但是因爲我是Angular的新手,所以我有點失落。

+0

我在這裏做了一個plunkr的http://嵌入。 plnkr.co/18ExMUHD1nTuhYEs6fMs/preview及其爲我工作。你的HTML是什麼樣的? –

+0

感謝plunkr。我想那個user3906922回答了我的問題。我更新了這個問題,以防你想看到HTML。 –

回答

2

如果你所得到的控制器作爲一個屬性,屬性名必須是該指令的名稱:

<greeting greeting="GreetingController" finnish="" hindi=""></greeting> 

this plunker

+0

謝謝,這正是我需要的。我只是沒有投票,因爲我沒有這樣的聲望。 –

相關問題