需要另一个使用属性定义控制器的指令的角度指令

Angular directive that requires another directive that uses an Attribute defined controller

本文关键字：指令 控制器 定义 属性 另一个      更新时间：2023-09-26

我正在学习角度，当我研究自定义指令时，我陷入了我不知道如何解决的情况。以下是我的定制建议：

/**
 * 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'
        };
    })

并在 HTML 中进行引用，如下所示：

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

其他指令停止工作，角度记录以下错误：

错误：找不到指令"印地语"所需的 [$compile：ctreq] 控制器"问候语"！

我想有一种方法可以解决这个问题，但由于我是 Angular 的新手，所以我有点迷茫。

如果要将控制器作为属性获取，则属性名称必须是指令的名称：

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

看到这个 plunker

相关文章：