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 に設定すると、親スコープを継承することを意味し、子スコープになります。

2. false に設定すると、親スコープを直接使用します。

別のオブジェクト設定方法があります。これは、分離スコープを使用する場合、分離の外側の場所と対話するための 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 で使用することを忘れないでください:

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

【require】

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

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

AngularJS 開発マニュアル

にアクセスして学習してください)

[ターミナル]

属性ターミナル: true の場合、現在の命令よりも低い優先順位を示す命令は実行されません。が実行されると、この命令のみが実行されます。

3: ビューとモデル間のデータの書式設定

フィルター関数と同様に、合意を容易にするために、ある種の翻訳後にデータをページに表示したい場合がありますが、データベースの場合は単純なシリアル番号より有益な場合があるため、この関数を実装するにはリンク内で次のメソッドを使用する必要がある場合があります:

1.ctrl.$formatters.unshift(function(input) {//data formatting from model to view});

2.ctrl.$parsers.unshift(function(input) {//ビューからモデルへのデータの書式設定})。

上記の $formatters と $parsers は、ビューからモデルとモデルからビューの 2 つのキューであり、内部で定義されたメソッドによるフィルタリングを容易にし、パイプライン フローに似ており、最終的に宛先に流れます。

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

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

入力データはコマンドの jquery を通じて変更されることがありますが、現時点では、次のいずれかの方法を選択できます:

1.フレームの変更により、Angularjs はデータが変更されたことを検出し、$setViewValue(value) を呼び出してデータを同期します: $("input").trigger("change");

2. viewValue および modelValue への値の同期: ctrl.$setViewValue($scope.info) での動作。

5: いくつかのスキル

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

2.モニタリングを設定する 指定したモデル値はもちろん、コレクションをモニタリングするメソッドもあります: $scope.$watch(attrs['ngModel'], function(newValue, oldValue) {});

3. 新しく追加される場合もあります。文字列を angularjs で管理する必要がある場合は、$compile(newHtml)($scope) メソッドを使用してコンパイルできます。

6: 一般的に使用されるメソッドまたはサービス

文字列を解析するには 2 つの方法があります (属性またはメソッドの場合があります)。以下の例を見てください:

<p scope-example user-data-name="user" on-send=&#39;sendMail(email)&#39; from-name={{name}}></p>

さて、この記事はここまでです (次のように考えてください)詳細については、PHP 中国語 Web サイト

AngularJS ユーザー マニュアル

にアクセスして学習してください)。ご質問がある場合は、以下にメッセージを残してください。

以上がAngularjs のカスタム ディレクティブに関する貴重な詳細とヒントの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。