一尘不染

控制器内部指令的行为

angularjs

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

例如,在这段代码中,我可以从已声明的控制器调用一个函数,以在浏览器控制台上打印“ 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);
         });


        });
    }])

好的,这很好。

我的问题是

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

这些是我在Angular Directive文档中找不到的问题。

这是一个带有示例代码的插件


阅读 240

收藏
2020-07-04

共1个答案

一尘不染

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

是的。

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

就像常规的Angular应用程序一样,控制器负责提供指令的行为。就是说,您应该只在控制器函数内部操作范围。如果需要通过链接函数更改范围,请调用它的方法。此外,由于控制器是在链接功能之前执行的,因此您应该在前者中初始化作用域,以便后者可以使用有效的模型进行工作。

我真的需要避免在此控制器中操纵DOM元素吗?即使$ scope,$ elem等相同?

根据定义,链接功能是执行DOM操作的地方。我找不到能阻止您在指令的控制器内操作DOM的技术原因,除非您不应该这样做。实际上,为了检查我是否刚刚更改了一条指令,我编写了所有代码并将其从链接功能移至控制器功能,并且一切正常。但是,如果将范围逻辑和DOM操作混合在一起,我认为很难跟踪正在发生的事情。

最后,您可能会发现本文很有用:了解指令

2020-07-04