Question

我仍然试图在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>

test.js

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

正如您所看到的，当您将鼠标悬停在指令上时，我只是想从“MyCtrl”中引用一些数据。

但是，在页面加载时，我得到error：

Error: $compile:ctreq
Missing Required Controller
Controller 'MyCtrl', required by directive 'direct', can't be found!

所以Angular找不到“MyCtrl”控件。我曾经假设，因为我们处于“myApp”模块的范围内，Angular会选择这个控制器，但显然不是？

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

是否有其他要求让我失去工作？

Answer 1

是的，这是可能的。

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

这是演示此代码的CSSDeck。

所有这一切，这让我觉得它是指令控制器的一个不寻常的用例。我怀疑这只是用于演示概念的临时代码，但通常只有在需要将父指令的行为或属性暴露给子指令时才会使用指令控制器。

最后，值得注意的是，最好的做法是避免引入像var myApp这样的全局变量。只需使用方法链。

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

1 个答案: