AngularJsリンクまたはポストリンク使用例

カスタムディレクティブを初めて使用する私は、Linkプロパティの使い方を示す簡単な例を作成しました。すべて、私はそれによって、範囲を定義したり変更したりすることができたことを確認できました。他の何かを行うことはできますか？AngularJsリンクまたはポストリンク使用例

HTML

<html> 
<head> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script> 
</head> 
<body ng-app="myApp" ng-controller="myCtrl"> 
<div peter></div> 
{{name}} 
<script> 
//app declaration 
var app = angular.module('myApp',[]); 
//controller declaration 
app.controller('myCtrl', function($scope){ 
    $scope.name = "Hi dear!" 
}); 
//directives declaration 
app.directive('peter', function(){ 
    return{ 
     restrict: 'A', 
     template: '{{name}}', 
     link: function(scope, element, attr){ 
      scope.name = "Hira"; 
     } 
    } 
}); 
</script> 
</body> 
</html>

結果

比良
比良

出典

2016-09-24 Deadpool

は、リンク関数のシグネチャは次のようになります。function(scope, iElement, iAttrs, controller, transcludeFn)。

前述のとおり、最初の引数scopeは、ディレクティブの有効範囲にアクセスすることを許可します。

第2引数iElementは、ディレクティブのDOM要素のangular.elementラッパー（利用可能な内容に応じてjQueryまたはjqLite）にアクセスすることを許可します。

第3引数iAttrsは、ディレクティブの属性にアクセスする権限を与えます。

第4引数は、ディレクティブによって（オプションで）必要なコントローラにアクセスすることを許可します。これらのコントローラーを使用して、他のコントローラーから公開されたAPIと対話することができます。

第5引数transcludeFnは、カスタムディレクティブがHTMLコンテンツをクロールすることである場合、どのようにトランスリースを実行するかに関係します。

詳細については、angular.compile documentationを参照してください。

出典

2016-09-24 14:02:13 austinbruch

Directiveは、主にDomを操作するために使用されます。link functionを使用してDom要素のプロパティを変更できます。

dom操作のための角度使用Jqlite。

3リンク機能のための標準のparams。：ここでは

はJqlite、

.directive('sampleDirective', function(){ 
    return { 
      link: function(scope, element, attrs) { 
      // this example binds a behavior to the 
      // mouseenter event 
      element.bind("mouseenter", function(){ 
       ... do stuff after mouseenter ... 

      } 
      element.bind("click", function(){ 
       ... do stuff after mouseenter ... 

      } 
      element.bind("keyup", function(){ 
       ... do stuff after mouseenter ... 

      } 
    }, 
    restrict: ‘E’, 
    template: <div>Hello, World!</div> 
     } 
})

リンク機能argsを使用してDOM操作を説明する例である（プラスオプション4：コントローラーを）彼ら」指定されていれば、指示関数によってargsとして与えられます。

範囲：オブジェクトがローカルでどの範囲

要素：this

ATTRS：指令呼出し自身を含む要素に定義されたHTML属性を含むオブジェクト要素がで宣言

関数には名前ではなく順序が指定されています。あなたが今までに望んだことを彼らに託してください。

This is link reference

This is the jqlite method reference used in angular

出典

2016-09-24 14:37:40 Sravan

AngularJsリンクまたはポストリンク使用例

答えて

関連する問題