内部指令控制器的行为 [英] Behavior of controller inside directives

问题描述

我知道，一个 $范围从控制器中可以共享一个链接功能指令。

例如，在此code我可以宣布控制器调用一个函数来打印的'Hello World浏览器控制台上：

  .directive（'myDirective'，[功能（）{
        返回{
            限制：'E'，
            更换：真实，
            控制器：'myController的，
            templateUrl：指令/ myDirective.tpl.html'，
            链接：功能（范围，ELEM，ATTRS，控制器）{
                scope.message =世界，你好！;
            }
        };
    }]）    .controller（'myController的'，[功能（$范围，$元，$ ATTRS，$​​日志$超时）{        // $超时等待链接功能做好准备。
        $超时（函数（）{
            //这个打印Hello World预期。
            $ log.debug（$ scope.message）;
         }）;
        }）;
    }]）
 

好吧，这工作正常。

我的问题是

1. 在这种方法中，它是在与将在控制器和指令？
之间的共享范围

2. 什么是使用这种方法的后果是什么？让我们假设我会的不可以操纵控制器， DOM 元素只有在链接功能。


3. 我真的需要避免操作DOM元素在这个控制器？即使 $范围， $ ELEM 等都是一样的吗？

这些都是我没有在角指令文档发现的问题。

下面是与样品code 一个plunker。

解决方案

  

在这种方法中，它是将在控制器和指令之间共享相同的范围？

是的，是的。

  

什么是使用这种方法的后果是什么？让我们假设，我不会操纵器的DOM元素，只是在链接功能。

该控制器是提供该指令的行为，就像一个普通的角应用。这就是说，你应该只操纵控制器功能内的范围。如果你需要的范围从链接功能改变，调用它的方法。此外，由于控制器的连接功能之前执行，你应该在初始化前者因此后者的范围可以得到一个有效的模式去努力。

  

我真的需要避免操纵该控制器DOM元素？即使$范围，$ ELEM等都是一样的吗？

根据定义，链接功能是执行DOM操作的地方。我找不到一个技术原因，将prevent你操纵指令的控制器内的DOM，只是你不应该。事实上，为了检查我刚刚转变的一个指令，我已经写了和感动都来自链接功能的code到控制器的功能，一切都保持正常工作。但是，如果你既混合逻辑的范围和DOM操作起来，我认为这将是很难追查这是怎么回事。

最后，你会发现这篇文章有用：了解指令

I know that a $scope from a controller can be shared to a link function in directives.

For example, in this code I can call a function from declared controller to print 'Hello World' on browser console:

 .directive('myDirective', [function () {
        return {
            restrict : 'E',
            replace : true,
            controller: 'MyController',
            templateUrl : 'directives/myDirective.tpl.html',
            link : function (scope, elem, attrs, controller) {
                scope.message = 'Hello World!';
            }
        };
    }])

    .controller('MyController', [function ($scope, $element, $attrs, $log, $timeout) {

        // $timeout to wait the link function to be ready.
        $timeout(function () {
            // This prints Hello World as expected.
            $log.debug($scope.message);
         });


        });
    }])

Ok, this works fine.

My questions are:

1. In this approach, it is the SAME scope that will shared between the controller and the directive?
2. What is the consequences to use this approach? Let us assume that I will not manipulate DOM elements in controller, only in link function.
3. I really need to avoid manipulate DOM elements in this controller? Even if the $scope, $elem, etc are the same?

These are questions that I didn't find on Angular Directive documentation.

Here's a plunker with the sample code.

解决方案

In this approach, it is the SAME scope that will shared between the controller and the directive?

Yes, it is.

What is the consequences to use this approach? Let us assume that I will not manipulate DOM elements in controller, only in link function.

The controller is what provides the directive's behavior, just like with a regular Angular application. That said, you should manipulate the scope inside the controller function only. If you need to change the scope from the link function, call a method of it. Besides, since the controller is executed before the link function, you should initialized the scope in the former so the latter can get a valid model to work on.

I really need to avoid manipulate DOM elements in this controller? Even if the $scope, $elem, etc are the same?

By definition, the link function is the place to perform DOM manipulation. I can't find a technical reason that would prevent you from manipulating the DOM inside the directive's controller except that you shouldn't. In fact, in order to check that I've just changed one directive I've written and moved all the code from the link function to the controller function and everything's kept working. But if you mix both scope logic and DOM manipulation together I think it'll be hard to track down what's going on.

Finally, you may find this article useful: Understanding Directives.

这篇关于内部指令控制器的行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！