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

问题描述

我知道 controller 中的 $scope 可以共享给 directives 中的链接函数.

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

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

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


        });
    }])

好的，这很好用.

我的问题是:

1. 在这种方法中，SAME 范围将在控制器和指令之间共享?
2. 使用这种方法的后果是什么?让我们假设我不会不操作 controller 中的 DOM 元素，只会在 link 函数 中操作.
3. 我真的需要避免在这个 controller 中操作 DOM 元素吗?即使$scope、$elem等都是一样的?

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?

这些是我在 Angular Directive 文档中没有找到的问题.

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

这是带有示例代码的 plunker.

推荐答案

在这种方法中，控制器和指令之间共享的是 SAME 范围吗?

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

是的，是的.

使用这种方法的后果是什么?让我们假设我不会在控制器中操作 DOM 元素，只会在链接函数中操作.

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

控制器提供指令的行为，就像普通的 Angular 应用程序一样.也就是说，您应该只在控制器函数内操作作用域.如果您需要从链接函数更改范围，请调用它的方法.此外，由于控制器在链接函数之前执行，您应该在前者中初始化作用域，以便后者可以得到一个有效的模型来处理.

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.

我真的需要避免在这个控制器中操作 DOM 元素吗?即使 $scope、$elem 等是一样的?

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

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

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屋！