18

我知道 a$scope中的 acontroller可以共享到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. 在这种方法中，控制器和指令之间将共享相同的范围吗？
  2. 使用这种方法的后果是什么？让我们假设我不会操纵DOM中的元素controller，只会操纵link function.
  3. 我真的需要避免在此操作 DOM 元素controller吗？即使$scope, $elem, 等是相同的？

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

这是一个带有示例代码的 plunker。

4

3 回答 3

14

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

是的。

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

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

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

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

最后，您可能会发现这篇文章很有用：了解指令。

于 2013-08-13T03:31:43.610 回答
5

1）是的，它们都共享相同的范围，因为您使用指令的控制器来记录范围，这意味着您可以像这样将“MyController”放在指令中

return {
  replace: true,
  controller: function($scope,...){ //  equals MyController
  }
}

如果控制器是指令的包装器而不是指令的内部，并且指令范围设置为 true 或对象散列，那么它们将不会共享相同的范围。

2）没有后果，只是不要在控制器中操作 DOM，控制器的用途之一是将指令连接在一起以从服务或通过简单的范围扩大（即：scope.message = “Hello World”）无论哪种方式，它们都需要最小化。如果您想在其他指令之间共享数据，那么您的设置方式是理想的，您可以简单地要求该指令的控制器。

3) 是的，避免在控制器中进行 DOM 操作，它不用于表示逻辑或用户看到的内容，这是指令的作用，记住 SOC（关注点分离）MVC/MV* 模式的每个部分都有自己的滚动玩。

用一种简单的方式来想它，比如这个用户在表示层上看到按钮，用户单击按钮一个用于单击按钮的功能发生在业务层（控制器）上，它获取结果并存储在数据/模型层中。

如果按钮除了处理用户和数据层之间的命令（计算、评估等）之外还有其他操作，例如添加该函数属于指令内的类（DOM 操作），请注意。

一个伟大的阅读和更深入这里

于 2013-08-13T03:09:09.860 回答
1

查看更新的 plunker：http ://plnkr.co/edit/pT8rEDz7gWKUPYIZhUYA?p=preview

  1. 是的，这是相同的范围。id 是一样的，可以看到内容更新了。
  2. 共享范围的含义是很难追踪谁更改了什么。我强烈建议您的指令使用隔离范围。
  3. 随意操作 DOM。跟踪更改将是一个有趣的练习......我也强烈建议不要进行任何 DOM 操作。我会将 DOM 操作与其他活动分开，方法是将它们包装在一个指令中。

Angular 的强项之一是指令，因此我会尽可能使用它们来区分您的关注点。

于 2013-08-13T03:04:10.967 回答