Javascript 我可以在指令中要求模块级控制器吗？_Javascript_Angularjs_Angularjs Directive

Javascript 我可以在指令中要求模块级控制器吗？

javascript angularjs

Javascript 我可以在指令中要求模块级控制器吗？,javascript,angularjs,angularjs-directive,Javascript,Angularjs,Angularjs Directive,在Angular JS中，我仍在试图找出控制器、模块、服务等的角色我试图在指令中要求一个控制器。我试图引用的控制器与指令是同一模块的一部分，因此我假设这将“正常工作”： index.html: <!DOCTYPE html> <html ng-app="myApp"> <head> <script src="jquery.js" type="text/javascript">

在Angular JS中，我仍在试图找出控制器、模块、服务等的角色

我试图在指令中要求一个控制器。我试图引用的控制器与指令是同一模块的一部分，因此我假设这将“正常工作”：

index.html:

<!DOCTYPE html>
<html ng-app="myApp">
  <head>
    <script src="jquery.js" type="text/javascript"></script>
    <script src="angular.min.js" type="text/javascript"></script>
    <script src="test.js" type="text/javascript"></script>
  </head>
  <body>
    <direct>
        ABC
    </direct>
  </body>
</html>

var myApp = angular.module('myApp', []);

myApp.controller('MyCtrl', function($scope) {
    $scope.data = "Hello World!";
});

myApp.directive('direct', function() {
    function link(scope, element, attrs, ctrl) {
        element.on("mouseenter", function() {
            alert(ctrl.data);
        });
    };
    
    return {
        restrict: 'E',
        link: link,
        require: 'MyCtrl', 
        template: '<div>Alert!</div>'
    }
});

因此，Angular找不到“MyCtrl”控件。我假设，因为我们在“myApp”模块的范围内，Angular只会在这个控制器上接收，但显然不是

在这个简化的示例中，似乎我想要使用控制器：“MyCtrl”，但事实并非如此。我希望能够访问“MyCtrl”中的数据，而不将其作为该指令的控制器（从语义上讲，“MyCtrl”作为该指令的控制器是没有意义的）

我还缺少其他一些工作要求吗？

是的，这是可能的

var myApp = angular.module('myApp', []);

myApp.controller('MyCtrl', function($scope) {
    this.data = "Hello World!";
});

myApp.directive('direct', function() {
    function link(scope, element, attrs, ctrl) {
        element.on("mouseenter", function() {
            alert(ctrl.data);
        });
    };

    return {
        restrict: 'E',
        link: link,
        controller: 'MyCtrl', 
        template: '<div>Alert!</div>'
    }
});

var myApp=angular.module（'myApp'，[]）；
myApp.controller（'MyCtrl'，函数（$scope）{
this.data=“你好，世界！”；
});
myApp.directive（'direct'，function（）{
功能链接（范围、元素、属性、ctrl）{
on（“mouseenter”，function（））{
警报（ctrl.data）；
});
};
返回{
限制：'E'，
链接：链接，
控制器：“MyCtrl”，
模板：“警报！”
}
});

下面是一个演示此代码的示例

尽管如此，对于指令控制器来说，这是一个不寻常的用例。我怀疑这只是为了演示这个概念而编写的临时代码，但通常只有在需要将父指令上的行为或属性公开给子指令时才使用指令控制器

最后，值得注意的是，避免像您在这里使用

var myApp

那样引入全局变量被认为是最佳实践。只需使用方法链接。

基于文档；我认为require应该是指另一个指令，这两个指令需要结合使用。我要补充的是，这听起来像是您试图将外部依赖添加到指令中；这通常会破坏封装的目的。@Reboog711啊，那么这只在您试图要求服务时有效？我将详细说明我的意图——我正在尝试这样做，以便在控制器之间传递数据，我认为这不会破坏封装。例如，如果我有一个菜单对象，一个用户向他们的订单中添加了一个项目，我希望能够说“用户向他们的订单中添加了菜单项目”（这是一个粗略的例子，但你明白了）。在深入研究之后，我认为我想要的是一个服务。控制器之间共享数据应该使用服务或工厂；所以我认为你的思路是正确的。这实际上是在为控制器创建另一个实例，你在该控制器上修改的变量不会影响另一个。

var myApp = angular.module('myApp', []);

myApp.controller('MyCtrl', function($scope) {
    this.data = "Hello World!";
});

myApp.directive('direct', function() {
    function link(scope, element, attrs, ctrl) {
        element.on("mouseenter", function() {
            alert(ctrl.data);
        });
    };

    return {
        restrict: 'E',
        link: link,
        controller: 'MyCtrl', 
        template: '<div>Alert!</div>'
    }
});