プロジェクトで Angularjs カスタム命令を使用する方法

今回は、Angularjs のカスタム命令をプロジェクトで使用する方法と、プロジェクトで Angularjs のカスタム命令を使用する際の注意点について説明します。以下は実際のケースです。

1: カスタム命令に一般的に使用されるテンプレート

以下は大まかな説明であり、言及されていない詳細と重要な関連知識については後で説明します:

angular.module('yelloxingApp', []).directive('uiDirective', function() {
  return {  
    restrict:String,//标明该指令可以在模板中用于元素E、属性A、类C和注释M或组合    
    priority:Number,//设置指令执行优先级，在某个DOM上优先级高的会先执行
        terminal:Boolean,    
    template:String or Template Function,//就是设置模板，和下面的templateUrl属性二个只可以设置一个，目的一样    
    templateUrl:String or Template Function,//除了字符串，这二个属性还可以设置函数    
    replace:Boolean,//指令模板是否替换原来的元素    
    scope:Boolean or Object,
    controller:String or function(scope, element, attrs) { ... },    
    require:String or Array,    
    //你需要知道link在每个实例都执行一遍，compile全程只会执行一遍
    link: function(scope, element, attrs,ctrl) { ... },    
    compile:function(element, attrs) {
      //常用的就是compile的此处写执行一次的代码，或者在link方法里面写和dom有关的操作
    }
  };
});

2: いくつかの属性の説明

[スコープ]

最初にブール値について説明します。これは比較的単純です:

1. true に設定すると、子スコープになります。この場合、親スコープを直接使用します。

別のオブジェクト設定方法があります。これは、分離スコープを使用する場合、分離の外側の場所と対話するための 3 つのメソッドが提供されています。以下に 1 つずつ説明する例を示します。コマンドがどのように記述されているかを見てみましょう:

angular.module('yelloxingApp', []).directive("scopeExample", ['$rootScope', function($rootScope) {
  return {
    restrict: 'A',    
    scope: {
      _userDataName: "=userDataName",
      _onSend: "&onSend",
      _fromName: "@fromName"
    },    
    template: `
      <button ng-click="_useParentMethod()">
        点击按钮调用父级的方法
      </button>
      
      <input ng-model="_userDataName"/>
      <ul>
        <li>fromName={{newfromname}}</li>
        <li>这是从父级获取到的{{_userDataName}}</li>
      </ul>`,
       link: function($scope, element, attrs) {
      //使用@符号可将本地作用域的变量与DOM属性的值进行绑定，即这里通过@得到父类fromName的值
      $scope.newfromname = $scope._fromName;
      $scope._useParentMethod = function() {      
        //使用&符号可以在其中调用父类的方法
        $scope._onSend({ "email": { "email": "yelloxing@gmail.com" } });
        console.log($scope._userDataName);        
      };
    }
  };
}]);

最後に、これを HTML で使用することを忘れないでください:

コードをコピーします

コードは次のとおりです:

【require】

別のコントローラーをリクエストし、それを link メソッドの 4 番目のパラメーターとして使用します。これを渡す際に注意する必要があるのは、コントローラーを見つける方法です。

コントローラーを見つける方法は次のように理解できます: use?現在のコマンドで必要なコントローラーが見つからない場合、リンク関数の 4 番目のパラメーターとして null が渡されることを示します。 ^ プレフィックスが追加されている場合、コマンドは、require パラメーターで指定されたコントローラーを検索します。上流のコマンド チェーンでは、require: "?^ngModel" のように組み合わせることもできます。プレフィックスがない場合、その命令は、コントローラー (または指定された名前の命令) が存在しない場合、そのコントローラー内で検索されます。見つかった場合、ミスがスローされます。

[ターミナル]

属性ターミナル: true の場合、現在の命令よりも優先度の低い命令は実行されず、この命令のみが実行されます。

3: ビューとモデル間のデータのフォーマット

フィルター機能と同様に、合意を容易にするために、ページに何らかの翻訳を行った後にデータを表示したい場合がありますが、データベースの場合は単純かもしれません。シリアル番号の方が有益なので、この機能を実装するには、リンク内で次のメソッドを使用する必要がある場合があります:

$scope.name = "心叶";
$scope.user = "yelloxing";
$scope.sendMail = function(email){
  console.error(email);
}

上記の $formatters と $parsers は、ビューからモデルとモデルからビューの 2 つのキューであり、これにより、内部の定義 フィルタリング方法はパイプの流れに似ており、最終的に目的地まで流れます。

コントローラーを見つけるために、require: "?ngModel" のようなステートメントを設定することを忘れないでください。

4: ビューとモデルデータの同期の問題

コマンドの jquery を介して入力データが変更されることがありますが、angularjs はそれを認識しません。このとき、次のいずれかの方法を選択できます。入力ボックスの変更をトリガーし、Angularjs にデータが変更されたことを検出させ、$setViewValue(value) を呼び出してデータを同期します:

1.ctrl.$formatters.unshift(function(input) {//model到view的数据格式化})；
2.ctrl.$parsers.unshift(function(input) {//view到model的数据格式化})。

2. value を viewValue と modelValue に同期する動作を直接手動でトリガーします:

$("input").trigger("change");

5 : いくつかの断片的なスキル

1. 入力ボックスが有効かどうかに応じて true または false を設定します: ctrl.$setValidity(errorType, boolean); //errorType はエラー カテゴリを表し、カスタマイズできます

2.もちろん、コレクションを監視する方法もあります:

ctrl.$setViewValue($scope.info)。

3. 命令に新しく追加された文字列を angularjs で管理する必要がある場合は、次のメソッドを使用してコンパイルできます:

$scope.$watch(attrs['ngModel'], function(newValue, oldValue) {});

この記事の事例を読んだ後は、その方法をマスターしたことになります。さらに興味深い内容については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

Vueの計算プロパティとリスナーの実践的なプロジェクトの詳細な説明

JS+TypeScriptでクラスを使用する方法

以上がプロジェクトで Angularjs カスタム命令を使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。