指令内的函数与控制器内的函数之间的区别

Question

AngularJS 新手，有很多问题。

1. 请问写在指令中的函数和写在控制器中的函数有什么区别？

例如在这个指令中sn-p:

link: function(scope, element, attrs) {
                scope.hideModal = function () { 
                    console.log("hide modal fxn called");
                    scope.show = false;
                };
            },
template:'<div class=\"ng-modal\" ng-show=\"$scope.show\">' + 
            '<div class=\"ngdialog-overlay\" ng-click=\"hideModal()\"></div>' +
            '<div class=\"ng-modal-dialog\" ng-style=\"dialogStyle\">' + 
              '<div class=\"ng-modal-close\" ng-click=\"hideModal()\">X</div>' + 
              '<div class=\"ng-modal-dialog-content\" ng-transclude></div>' + 
              '<div style=\"left:80%\"><button type = \"button\" style=\"float:right\">Next</button></div>' +
            '</div>' + 
         '</div>'

1. 为什么 hideModal() 函数写在链接内部（不确定这叫什么）而不是控制器内部？
2. 是否可以在控制器中编写 hideModal()？
3. 如果#3 的答案是肯定的，我可以完全省略写链接吗？如果我这样做会有什么缺点吗？

我问这些是因为无论我把它放在哪里（指令或控制器中），我都无法让 hideModal() 函数工作，我想了解原因。

如果您能尽可能通俗地回答我，我将不胜感激。 AngularJS 对我来说太难理解了，而且我还不是很精通它，所以如果你不这样做，你有 100% 的机会会被我瞪大眼睛。

谢谢。

Answer 1

1. 如果添加到$scope 上确实没有区别。 link 函数中的 scope 与控制器中的 $scope 完全相同。
2. 不知道为什么它在link 函数中。如果我需要 DOM 操作，即通过 jQuery，我只使用 link
3. 是的，这很好，因为它被添加到同一个$scope。
4. 不会有任何缺点，您可以完全省略link 函数。

---

一般规则是，您需要DOM 操作吗？使用link 函数，否则请坚持使用controller。

区别在于执行时间，controller函数在编译前执行，link在模板编译后执行。

这就是为什么您要使用链接函数进行DOM 操作。在controller 阶段，模板尚未编译，因此您不能在函数的构造函数中使用DOM 操作。

---

如果您根本不需要DOM 操作，最好查看新的.component 语法。与.directive 语法相比，这更容易理解。请记住.component 语法只是.directive 的有限抽象

Link to the component docs