Angular: Was ist die Bedeutung der Link-Option in der Direktive

-2

Ich lerne eckig und einige Zeit stolpern, um Code und ihre Bedeutung zu verstehen. Sehen Sie sich den Beispielcode an und sagen Sie mir, was ist die Linkoption in Direktiven?Angular: Was ist die Bedeutung der Link-Option in der Direktive

welche Art von Zweck Link-Option lösen oder tut? wenn der Code innerhalb der Link-Option ausgelöst wird? Bitte geben Sie mir einen Einblick in die Link-Option. Dank

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'); 
     } 
    });

Quelle

2016-04-21 Monojit Sarkar

Bitte lesen Sie die Dokumentation zu Angular Direktiven https://docs.angularjs.org/guide/compiler – Chandermani

Bitte sehen Sie diese Seite https://docs.angularjs.org/guide/directive Hier können Sie über Link-Option in Richtlinien lesen.

Richtlinien, die die DOM verwenden in der Regel die Link Option registrieren DOM Zuhörer sowie Aktualisieren der DOM ändern möchten. Es wird ausgeführt, nachdem die Vorlage geklont wurde und wo die Direktivenlogik eingefügt wird.

Für eine Instanz;

Hier ist unser Controller;

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){});

Und unsere HTML-Seite;

<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>

Wenn Sie diesen Code ausführen Snippet Sie werden feststellen, dass die Richtlinie, die wir auf das DOM zu ändern wäre in der Lage definiert. In diesem Beispiel haben wir einen Bereich als "hotArea" markiert und für diesen Bereich haben die Funktionen mouseover und mouseout ein anderes Verhalten als das Standardverhalten.

Quelle

2016-04-21 12:32:50 erolkaya84

besser kommen mit Beispiel, die die Bedeutung der Arbeit mit Link-Option zeigen. Vielen Dank –

Angular alle Elemente in der dom durchqueren und nach Richtlinie Erklärung suchen, ist es ihnen dann kompilieren und die Funktionalität dieser Richtlinien im Zusammenhang befestigen.

Die Link-Funktion in einer Direktive Feuer nach der Kompilierungsphase, und dienen als Super-Power-Controller, mit der Fähigkeit zu erfordern und zu verwenden andere Anweisungen und ihre Controller um das Element, und natürlich - manipulieren Sie das Element, hören Sie Ereignisse, usw., so können Sie das dom zum Beispiel entsprechend Ihrem Scope-Wert manipulieren.

Quelle

2016-04-21 12:31:05

besser kommen mit Beispiel, die die Bedeutung der Arbeit mit Link-Option zeigen. Danke –

Angular: Was ist die Bedeutung der Link-Option in der Direktive

Antwort

Verwandte Themen