ng-model tag_AngularJS の angularjs カスタム属性
双方向のデータ バインディングを実現するために、非入力型要素に ng-model を追加する必要がある場合があります。これにより、冗長なコードが削減されます。その場合は、この方法を試すことができます
例: ページで contenteditable 属性を使用して、ユーザーが直接コンパイルできる div 要素を実装します
html:
<style> .text{ margin:0 auto; width:100px; height:50px; border:1px solid red; } </style> </head> <body> <div ng-controller="selectController"> <div ng-repeat="pop in citylist"> <div class="text" contenteditable="true" ng-model="pop.pop"></div> </div> <button ng-click="cs()">输出新数据</button> </div> </body>
ただし、ng-model を直接バインドすると、データを取得できなくなります。この場合、以下に示すように、それにカスタム属性を追加する必要があります。
js:
<script> var app = angular.module('app', []); app.controller('selectController', function ($scope) { $scope.citylist=[{id:1,pop:"北京"},{id:1,pop:"上海"},{id:1,pop:"广州"}]; $scope.p={}; $scope.cs=function(){ console.log($scope.citylist); } }).directive('contenteditable', function() {//自定义ngModel的属性可以用在div等其他元素中 return { restrict: 'A', // 作为属性使用 require: '?ngModel', // 此指令所代替的函数 link: function(scope, element, attrs, ngModel) { if (!ngModel) { return; } // do nothing if no ng-model // Specify how UI should be updated ngModel.$render = function() { element.html(ngModel.$viewValue || ''); }; // Listen for change events to enable binding element.on('blur keyup change', function() { scope.$apply(readViewText); }); // No need to initialize, AngularJS will initialize the text based on ng-model attribute // Write data to the model function readViewText() { var html = element.html(); // When we clear the content editable the browser leaves a <br> behind // If strip-br attribute is provided then we strip this out if (attrs.stripBr && html === '<br>') { html = ''; } ngModel.$setViewValue(html); } } }; }) </script>
パラメータのカテゴリは次のとおりです:
いくつかのパラメータの説明
制限:
(文字列) DOM で命令がどのように宣言されるかを示すオプションのパラメーター。
値は次のとおりです: E (要素)、A (属性)、C (クラス)、M (コメント)。デフォルト値は A です。E (要素): <ディレクティブ名>ディレクティブ名>
A (属性):C (クラス):
M (コメント): <--directive:directiveName 式-->
2.必須
文字列は別のコマンドの名前を表し、リンク関数の 4 番目のパラメーターとして使用されます
具体的な使用法を説明するために例を示します
今、2 つの命令を書きたいとします。2 つの命令のリンク関数には重複するメソッドが多数あります (リンク関数については後で説明します)。
現時点では、これらの繰り返しメソッドを 3 番目の命令のコントローラーに記述することができます (前述したように、コントローラーは命令間の再利用動作を提供するためによく使用されます)
次に、これら 2 つの命令のうち、コントローラー フィールドを含む命令 (3 番目の命令)、
を要求します。最後に、これらの重複するメソッドは、リンク関数の 4 番目のパラメーターを通じて参照できます。
<!doctype html> <html ng-app="myApp"> <head> <script src="http://cdn.staticfile.org/angular.js/1.2.10/angular.min.js"></script> </head> <body> <outer-directive> <inner-directive></inner-directive> <inner-directive2></inner-directive2> </outer-directive> <script> var app = angular.module('myApp', []); app.directive('outerDirective', function() { return { scope: {}, restrict: 'AE', controller: function($scope) { this.say = function(someDirective) { console.log('Got:' + someDirective.message); }; } }; }); app.directive('innerDirective', function() { return { scope: {}, restrict: 'AE', require: '^outerDirective', link: function(scope, elem, attrs, controllerInstance) { scope.message = "Hi,leifeng"; controllerInstance.say(scope); } }; }); app.directive('innerDirective2', function() { return { scope: {}, restrict: 'AE', require: '^outerDirective', link: function(scope, elem, attrs, controllerInstance) { scope.message = "Hi,shushu"; controllerInstance.say(scope); } }; }); </script> </body> </html>
では、命令内のコントローラーが異なる命令間の通信に使用されることもさらに説明されています。
さらに、require パラメーター値に次のプレフィックスのいずれかを追加できます。これにより、検索コントローラーの動作が変更されます。
(1) プレフィックスがない場合、命令はそれ自身が提供するコントローラー内を検索し、コントローラーが見つからない場合はエラーがスローされます。
(2)?現在の命令で必要なコントローラーが見つからない場合、リンク接続関数の 4 番目のパラメーターに null が渡されます。
(3)^現在のディレクティブに必要なコントローラーが見つからない場合は、親要素のコントローラーが検索されます(4)?^ 組み合わせ

ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

AI Hentai Generator
AIヘンタイを無料で生成します。

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック











Javascript は、コードの構成、コードのプログラミング パラダイム、およびオブジェクト指向理論の点で非常にユニークな言語です。しかし、JavaScript が 20 年間主流であったとはいえ、jQuery、Angularjs、さらには React などの人気のあるフレームワークを理解したい場合は、「Black Horse Cloud Classroom JavaScript Advanced Framework」を見てください。デザインビデオチュートリアル」。

今日の情報化時代において、ウェブサイトは人々が情報を入手し、コミュニケーションを図るための重要なツールとなっています。レスポンシブな Web サイトはさまざまなデバイスに適応し、ユーザーに高品質のエクスペリエンスを提供できます。これは、現代の Web サイト開発のホットスポットとなっています。この記事では、PHP と AngularJS を使用して応答性の高い Web サイトを構築し、高品質のユーザー エクスペリエンスを提供する方法を紹介します。 PHP の概要 PHP は、Web 開発に最適なオープンソースのサーバー側プログラミング言語です。 PHP には、学びやすさ、クロスプラットフォーム、豊富なツール ライブラリ、開発効率など、多くの利点があります。

インターネットの継続的な発展に伴い、Web アプリケーションは企業情報構築の重要な部分となり、最新化作業に必要な手段となりました。 Web アプリケーションの開発、保守、拡張を容易にするために、開発者は開発ニーズに合った技術フレームワークとプログラミング言語を選択する必要があります。 PHP と AngularJS は非常に人気のある 2 つの Web 開発テクノロジであり、それぞれサーバー側とクライアント側のソリューションであり、これらを組み合わせて使用すると、Web アプリケーションの開発効率とユーザー エクスペリエンスを大幅に向上させることができます。 PHPPHPの利点

インターネットの普及に伴い、ネットワークを使用してファイルを転送したり共有したりする人が増えています。ただし、さまざまな理由により、FTP などの従来の方法をファイル管理に使用しても、現代のユーザーのニーズを満たすことができません。したがって、使いやすく、効率的で安全なオンライン ファイル管理プラットフォームを確立することがトレンドになっています。この記事で紹介するオンライン ファイル管理プラットフォームは、PHP と AngularJS をベースにしており、ファイルのアップロード、ダウンロード、編集、削除などの操作を簡単に実行でき、ファイル共有、検索、検索などの一連の強力な機能を提供します。

Web アプリケーションの人気に伴い、フロントエンド フレームワーク AngularJS の人気も高まっています。 AngularJS は、Google が開発した JavaScript フレームワークで、動的な Web アプリケーション機能を備えた Web アプリケーションの構築に役立ちます。一方、バックエンド プログラミングの場合、PHP は非常に人気のあるプログラミング言語です。サーバーサイド プログラミングに PHP を使用している場合、PHP と AngularJS を使用すると、Web サイトにさらに動的な効果がもたらされます。

Web テクノロジーの急速な発展に伴い、シングル ページ Web アプリケーション (SinglePage Application、SPA) は、Web アプリケーション モデルとしてますます人気が高まっています。従来の複数ページの Web アプリケーションと比較して、SPA の最大の利点は、ユーザー エクスペリエンスがよりスムーズであり、サーバーのコンピューティング負荷も大幅に軽減されることです。この記事では、FlaskとAngularJSを使って簡単なSPAを構築する方法を紹介します。 Flask は軽量の Py です

インターネットの普及と発展に伴い、フロントエンド開発の重要性がますます高まっています。フロントエンド開発者として、私たちはさまざまな開発ツールとテクノロジーを理解し、習得する必要があります。その中でも、PHP と AngularJS は非常に便利で人気のあるツールです。この記事では、これら 2 つのツールをフロントエンド開発に使用する方法を説明します。 1. PHP の概要 PHP は、人気のあるオープン ソースのサーバー側スクリプト言語であり、Web 開発に適しており、Web サーバーやさまざまなオペレーティング システム上で実行できます。 PHP の利点は、シンプルさ、スピード、利便性です。
