Javascript 如何从页面控制器访问指令中的dom元素

我试图访问指令中的元素，但我的控制器找不到它，怎么做？在下面的示例中，控制器MyCtrl中的变量canvas为null

编辑： 具体地说，我的指令是一个定制的折叠，因此它的内容可以是多种多样的。例如，我有一个视图，该视图显示由我的指令生成的折叠中的信息，用户可以对其进行编辑。顺便说一下，业务逻辑在视图控制器中，它处理数据加载和发送用户修改。下面的代码已编辑为更准确

html:

指令：

myApp.directive('collapsibleDiv', function(){
    return {
        restrict: 'E',
        transclude: true,
        replace: true,
        scope: {
            title: '@'
        },
        controller: function ($scope, $element) {
            /* Some code to make my collapsible div how I want... */
            /* This has nothing to deal with content, this directive can store any kind of content */
        },
        templateUrl: 'collapsible.html'
    };
});

最终解决方案： 控制器不应该访问指令dom，我可以使用一个更模块化的方法，使用一个新的指令来处理我的画布，我的html现在看起来像这样，我的控制器是空的：

<collapsible-div title="Open Me">
    <my-canvas></my-canvas>
</collapsible-div>

---

我认为您在理解指令和控制器之间的差异时遇到了问题。我建议你深入了解这些概念

在您的特定问题上，当您使用指令时，并且由于您应该管理指令上的所有DOM操作，因此放置该指令的位置将是指令的链接函数

在这种情况下，类似这样的情况：

myApp.directive('directive', function(){
    var directive = {
        restrict: 'E',
        transclude: true,
        replace: true,
        template: '<div ng-transclude></div>'
        link : directiveLinkFunction
    };

    function directiveLinkFunction( scope, element, attrs ) {

      // element -> the DOM element that hold the directive.
      // for different selection, use the jQuery lite API

    }

    return directive;
});

myApp.directive（'directive'，function（）{
var指令={
限制：'E'，
是的，
替换：正确，
模板：“”
链接：directiveLinkFunction
};
函数directiveLinkFunction（范围、元素、属性）{
//元素->保存该指令的DOM元素。
//对于不同的选择，请使用jQuery lite API
}
返回指令；
});

然后，您需要使用一些其他策略在控制器和指令之间共享数据，但这是一个完全不同的主题

---

Main point->对一个指令执行所有DOM操作。

您可以在指令中使用link，然后您将有权访问声明的元素。例如：

myApp.directive('directive', function(){
    return {
        restrict: 'E',
        transclude: true,
        replace: true,
        template: '<div ng-transclude></div>',
        link: function(scope, element, attrs){
              //Here you have control over element
              console.log(element); 
              //for example, you can create events on the element
              element.bind('click', function(){
                     //put your code here
              });

        }
    };
});

myApp.directive（'directive'，function（）{
返回{
限制：'E'，
是的，
替换：正确，
模板：“”，
链接：函数（范围、元素、属性）{
//在这里，您可以控制元素
控制台日志（元素）；
//例如，可以在元素上创建事件
元素绑定（'单击'，函数（）{
//把你的代码放在这里
});
}
};
});

您能否提供更多关于为什么要访问该元素的背景信息？Angular的主要目标之一是消除控制控制器中DOM的需要。我想有一个更好的方法来完成你想做的事情，而不反对Angular的范例。应该是

collapsablediv

？我的指令没有处理它的内容，该指令用于显示由控制器管理的各种信息，这是坏方法吗？是的，您必须始终考虑模块化方法。如果你要对此有一个指示，那么不要破坏东西，把一切都写在指示上。另一种可能是创建两个不同的指令：一个用于折叠，另一个用于画布。这将为您提供更多的模块化和关注点分离。好的，谢谢，这很清楚，所以在我的控制器中，我将只加载我的数据，然后我将使用一个指令显示一个画布，其中包含控制器加载的参数数据。最后看起来是这样的：

myApp.directive('directive', function(){
    var directive = {
        restrict: 'E',
        transclude: true,
        replace: true,
        template: '<div ng-transclude></div>'
        link : directiveLinkFunction
    };

    function directiveLinkFunction( scope, element, attrs ) {

      // element -> the DOM element that hold the directive.
      // for different selection, use the jQuery lite API

    }

    return directive;
});

myApp.directive('directive', function(){
    return {
        restrict: 'E',
        transclude: true,
        replace: true,
        template: '<div ng-transclude></div>',
        link: function(scope, element, attrs){
              //Here you have control over element
              console.log(element); 
              //for example, you can create events on the element
              element.bind('click', function(){
                     //put your code here
              });

        }
    };
});