angularjs - 指令内 Controller 的行为

Question

我知道一个 $scope来自 controller可以共享到 directives 中的链接功能.

例如，在这段代码中，我可以从声明的 Controller 中调用一个函数来在浏览器控制台上打印“Hello World”:

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


        });
    }])

好的，这很好用。

我的问题是 :

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

使用这种方法的后果是什么？让我们假设我会不是 操纵 DOM controller 中的元素, 仅在 link function .

我真的需要避免在 controller 中操作 DOM 元素?即使 $scope , $elem等是一样的吗？

这些是我在 Angular Directive documentation 上找不到的问题.

Here's a plunker with the sample code .

Answer 1

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

是的。

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

Controller 提供指令的行为，就像使用常规 Angular 应用程序一样。也就是说，您应该只在 Controller 函数内操作范围。如果您需要更改链接函数的范围，请调用它的方法。此外，由于 Controller 是在链接功能之前执行的，因此您应该在前者中初始化范围，以便后者可以获得有效的模型来处理。

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

根据定义，链接函数是执行 DOM 操作的地方。我找不到阻止您在指令 Controller 内操作 DOM 的技术原因，除非您不应该这样做。事实上，为了检查我是否刚刚更改了我编写的一个指令，并将所有代码从链接函数移动到 Controller 函数，并且一切正常。但是如果你将范围逻辑和 DOM 操作混合在一起，我认为很难追踪发生了什么。

最后，您可能会发现这篇文章很有用: Understanding Directives .