Angular：在指令

-2

中链接选项的意义是什么我正在学习角度和一段时间绊倒了解代码及其意义。请参阅下面的示例代码并告诉我指令中的链接选项是什么？Angular：在指令

什么样的目的链接选项解决或做什么？当链接选项中的代码激发？请给我一些关于链接选项的见解。谢谢

var myApp = angular.module('myApp', []); 
    myApp.directive('ngFinishRender', function ($timeout) { 
     return { 
      restrict: 'A', 
      link: function (scope, element, attr) { 
       if (scope.$last === true) { 
        $timeout(function() { 
         scope.$eval(attr.ngFinishRender); 
        }, 0); 
       } 
      } 
     } 
    }); 

    myApp.controller('myController', function ($scope, $timeout) { 
     $scope.lists = [ 
      { name: 'A', isShow: true }, 
      { name: 'B', isShow: true }, 
      { name: 'C', isShow: false }, 
      { name: 'D', isShow: false }, 
      { name: 'E', isShow: true }, 
      { name: 'F', isShow: true }, 
     ]; 

     $timeout(function() { 
      $scope.lists[2].isShow = true; 
     }, 3000); 

     $timeout(function() { 
      $scope.lists[3].isShow = true; 
     }, 6000);  

     $scope.finish = function() { 
      console.log('finish'); 
     } 
    });

来源

2016-04-21 Monojit Sarkar

请仔细阅读关于Angular指令的文档https://docs.angularjs.org/guide/compiler – Chandermani

请看这页https://docs.angularjs.org/guide/directive 在这里你可以阅读关于指令中的链接选项。

指令希望修改DOM通常使用链接选项注册DOM监听以及更新的DOM。它在模板被克隆之后执行，并且在其中放置指令逻辑。

对于一个实例;

这是我们的控制器;

var myApp = angular.module('myApp',[]); 
myApp.directive('hotArea', function() { 
    return { 
     link: function(scope, element, atts) { 
      element.bind("mouseover", function(){ 
       element.addClass("areaOn"); 
       console.log("mouseove"); 
      }); 
      element.bind("mouseout", function(){ 
       element.removeClass("areaOn"); 
       console.log("mouseove"); 
      }); 
     } 
    }; 
} 
); 

myApp.controller('myController',function($scope){});

而我们的html页面;

<style> 
    .areaOn { border: 3px solid red; } 
    .areaOff { border: none;} 
</style> 
<body> 
    <div ng-controller="myController"> 
     <div hot-area>This is an area</div> 
    </div> 
</body>

当您运行此代码段时，您会注意到我们定义的指令将能够修改DOM。在这个例子中，我们将一个区域标记为“hotArea”，对于这个区域，“mouseover”和“mouseout”函数具有与默认区域不同的行为。

来源

2016-04-21 12:32:50 erolkaya84

更好的例子，显示使用链接选项的重要性。谢谢 –

Angular遍历dom中的所有元素并搜索指令声明，然后编译它们并附加与这些指令相关的功能。

指令中的链接函数在编译阶段后触发，并作为超级大国控制器，能够在元素周围要求和使用其他指令及其控制器，当然还有 - 操作元素，监听事件，等等，所以你可以根据你的范围值来操作dom。

来源

2016-04-21 12:31:05

更好的例子显示了使用链接选项的重要性。谢谢 –

Angular：在指令

回答

相关问题