Page 105 - AngularJS权威教程
P. 105

10.3  绑定策略   85


                  4. $transclude                                                                     1
                  嵌入链接函数会与对应的嵌入作用域进行预绑定。

                  transclude链接函数是实际被执行用来克隆元素和操作DOM的函数。                                               2


                          在控制器内部操作DOM是和AngularJS风格相悖的做法,但通过链接函数就可以                                   3
                         实现这个需求。仅在compile参数中使用transcludeFn是推荐的做法。

                  例如,我们想要通过指令来添加一个超链接标签。可以在控制器内的$transclude函数中实                                      4
              现,如下所示:
                                                                                                     5
                  angular.module('myApp')
                  .directive('link', function() {
                      return {
                          restrict: 'EA',                                                            6
                          transclude: true,
                          controller:
                              function($scope, $element, $transclude, $log) {                        7
                              $transclude(function(clone) {
                                  var a = angular.element('<a>');
                                  a.attr('href', clone.text());
                                  a.text(clone.text());                                              8
                                  $log.info("Created new a tag in link directive");
                                  $element.append(a);
                              });                                                                    9
                          }
                      };
                  });
                                                                                                     10
                  指令的控制器和link函数可以进行互换。控制器主要是用来提供可在指令间复用的行为,但
              链接函数只能在当前内部指令中定义行为,且无法在指令间复用。
                                                                                                     11

                          link函数可以将指令互相隔离开来,而controller则定义可复用的行为。
                                                                                                     12

                  由于指令可以require其他指令所使用的控制器,因此控制器常被用来放置在多个指令间共
              享的动作。                                                                                  13

                  如果我们希望将当前指令的API暴露给其他指令使用,可以使用controller参数,否则可以
              使用link来构造当前指令元素的功能性。如果我们使用了scope.$watch()或者想要与DOM元素                                    14
              做实时的交互,使用链接会是更好的选择。
                  技术上讲,$scope会在DOM元素被实际渲染之前传入到控制器中。在某些情况下,例如使                                        15
              用了嵌入,控制器中的作用域所反映的作用域可能与我们所期望的不一样,这种情况下, $scope
              对象无法保证可以被正常更新。                                                                         16


                          当想要同当前屏幕上的作用域交互时,可以使用被传入到link函数中的scope                                     17
                         参数。
                                                                                                     18
   100   101   102   103   104   105   106   107   108   109   110