函数内部指令VS函数内部控制器的区别

时间:2016-07-18 08:02:16

标签: angularjs

AngularJS newb在这里,有很多问题。

  1. 请问一个指令写在控制器内的函数与控制器内写的函数之间的区别是什么?
  2. 例如,在此指令代码段中:

    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的答案是肯定的,我可以省略完全写入链接吗?如果我这样做会有任何不利之处吗?
    4. 我问这些是因为无论我把它放在哪里(指令或控制器)我都无法使hideModal()函数工作,我想知道为什么。

      如果你能尽可能以外行的方式回答我,我会非常感激。 AngularJS对我来说是一件很难理解的事情,我对它并不是那么精通,所以如果你不这样做的话,你有100%的机会从我那里得到空白的目光。

      谢谢。

1 个答案:

答案 0 :(得分:2)

  1. 如果将其添加到$scope,则确实没有区别。 scope函数中的link与控制器中$scope的{​​{1}}完全相同。
  2. 不确定为什么它在$inject函数中。如果我需要DOM操作,我只使用link,即通过jQuery
  3. 是的,这很好,因为它被添加到同一个link
  4. 没有任何缺点,您可以确定完全省略$scope功能。
  5. 一般规则是,您需要link操纵吗?使用DOM功能,否则只需坚持使用link

    不同之处在于执行时间,controller函数在编译之前执行,而controller在模板编译之后执行。

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

    如果您根本不需要DOM操作,那么查看新的DOM语法可能会更好。与.component语法相比,这更容易理解。请注意,.directive语法只是.component

    的有限抽象

    Link to the component docs