タグ付けされた質問 「angularjs」

オープンソースのJavaScriptフレームワークであるAngularJS（1.x）に関する質問に使用します。Angular 2以降のバージョンではこのタグを使用しないでください。代わりに、[angular]タグを使用してください。

4
$ location / html5とハッシュバングモードの切り替え/リンクの書き換え
Angularがtempaltes内のアンカータグのhref属性に表示されるURLを書き換えて、html5モードでもハッシュバングモードでも機能するように見えました。位置情報サービスのドキュメントには、 HTMLリンクの書き換えによってハッシュバングの状況が処理されると記載されているようです。したがって、HTML5モードでない場合はハッシュが挿入され、HTML5モードの場合は挿入されないことを期待します。 ただし、書き換えは行われていないようです。次の例では、モードを変更することはできません。アプリケーションのすべてのリンクは手動で書き換える必要があります（または実行時に変数から派生させる必要があります。モードに応じてすべてのURLを手動で書き換える必要がありますか？ Angular 1.0.6、1.1.4、1.1.3でクライアント側のURLの書き換えが行われていないようです。すべてのhref値の先頭に、ハッシュバングモードの場合は＃/、html5モードの場合は/を付ける必要があるようです。 書き換えを発生させるために必要な設定はありますか？ドキュメントを読み違えていますか？他にばかげたことをしていますか？ ここに小さな例があります： <head> <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.3/angular.js"></script> </head> <body> <div ng-view></div> <script> angular.module('sample', []) .config( ['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) { //commenting out this line (switching to hashbang mode) breaks the app //-- unless # is added to the templates $locationProvider.html5Mode(true); $routeProvider.when('/', { template: 'this is home. …
9
Angularディレクティブの再帰
いくつかの人気のある再帰的な角度指令Q＆Aがそこにあり、それらはすべて次の解決策の1つになります。 ランタイムスコープの状態に基づいて手動で段階的にHTMLを「コンパイル」 例1 [ stackoverflow ] 例2 [ angular jsfiddles page ] ディレクティブをまったく使用しないで、それ自体を参照する<script>テンプレート 例1 [ グーグルグループ ] 最初の方法には、手動のコンパイルプロセスを包括的に管理しない限り、以前にコンパイルしたコードを削除できないという問題があります。2番目のアプローチには、...ディレクティブではなく、その強力な機能を見逃しているという問題がありますが、もっと緊急に、ディレクティブと同じようにパラメーター化することはできません。単に新しいコントローラーインスタンスにバインドされます。 私は手動で、angular.bootstrapまたは@compile()リンク機能で遊んでいますが、削除および追加する要素を手動で追跡する問題が残ります。 実行時の状態を反映するために要素の追加/削除を管理するパラメーター化された再帰パターンを作成する良い方法はありますか？つまり、ノードの追加/削除ボタンと、ノードの子ノードに値が渡されるいくつかの入力フィールドを持つツリーです。おそらく、2番目のアプローチとチェーンされたスコープの組み合わせ（しかし、これを行う方法がわかりません）？
5
ポップアップを最もエレガントな方法で表示する
このAngularJSアプリがあります。すべてうまくいきます。 ここで、特定の条件がtrueになったときにさまざまなポップアップを表示する必要があり、次に進むための最良の方法は何かと思っていました。 現在、私は2つのオプションを評価していますが、他のオプションについては完全にオープンです。 オプション1 ポップアップ用の新しいHTML要素を作成し、コントローラーから直接DOMに追加できます。 これは、MVCデザインパターンを壊します。私はこの解決策に満足していません。 オプション2 静的HTMLファイルのすべてのポップアップのコードをいつでも挿入できます。次に、を使用してngShow、正しいポップアップのみを非表示/表示できます。 このオプションは実際にはスケーラブルではありません。 ですから、私が望むものを達成するためのより良い方法がなければならないと私はかなり確信しています。
6
Angular HttpPromise： `success` /` error`メソッドと `then`の引数の違い
AngularJS docによると$http、以下を返すための呼び出し： 標準のthenメソッドと2つのhttp固有のメソッド（successおよびerror）を持つpromiseオブジェクトを返します。その後、この方法は、二つの引数取り、成功とエラーレスポンスオブジェクトに呼び出されるコールバックを。成功メソッドとエラーメソッドは単一の引数を受け取ります。この関数は、リクエストが成功または失敗したときにそれぞれ呼び出されます。これらの関数に渡される引数は、thenメソッドに渡される応答オブジェクトの非構造化表現です。 responseオブジェクトが1つのケースで分解されているという事実は別として、私は両者の違いがわかりません の引数として渡される成功/エラーコールバック promise.then promiseのpromise.success/ promise.errorメソッドの引数として渡されるコールバック 何かありますか？一見同一のコールバックを渡すこれらの2つの異なる方法のポイントは何ですか？
177 angularjs  promise 
14
Angularでツリービューを作成することは可能ですか？
Webアプリでツリー構造のデータを表示したいと考えています。この作業にはAngularを使用したいと思っていました。 ng-repeatではノードのリストを反復処理できるように見えますが、特定のノードの深さが増加したときにネストを行うにはどうすればよいですか？ 次のコードを試してみましたが、HTMLの自動エスケープによりこれが機能しなくなりました。さらに、ul終了タグが間違った場所にあります。 私はこの問題について完全に間違った方法で進んでいると確信しています。 何か案は？
177 angularjs 
10
Angularjsを使用してローカルストレージにデータを保存するにはどうすればよいですか？
現在、サービスを使用してアクションを実行しています。つまり、サーバーからデータを取得して、サーバー自体にデータを格納しています。 これの代わりに、サーバーに保存するのではなく、ローカルストレージにデータを格納したいと考えています。どうすればよいですか？
177 angularjs 
10
angularjsで改行を保持する
私はこの SOの質問を見ました。 以前ng-bind="item.desc"使用している{{item.desc}}ため、使用する代わりに私のコードng-repeat。 だから私のコード： <div ng-repeat="item in items"> {{item.description}} </div> アイテムの説明には\n、レンダリングされない改行が含まれます。 上記{{item.description}}があると仮定して、改行を簡単に表示するにはどうすればよいng-repeatですか？
3
Angularでtransclude 'true'とtransclude 'element'をいつ使用するのですか？
いつtransclude: 'true'、いつ使用すればよいtransclude: 'element'ですか？私transclude: 'element'は角度のドキュメントで何も見つけることができません、彼らはかなり混乱しています。 誰かが簡単な言葉でこれを説明できたら幸いです。各オプションのメリットは何ですか？それらの本当の違いは何ですか？ これは私が見つけたものです： transclude: true コンパイル関数内で、transcludeリンク関数を使用してDOMを操作したり、HTMLタグでngTranscludeディレクティブを使用して、変換されたDOMをテンプレートに挿入したりできます。 そして transclude: ‘element’ これにより、要素全体がトランスクルードされ、トランスクルードリンク関数がコンパイル関数に導入されます。スコープがまだ作成されていないため、ここにスコープにアクセスできません。コンパイル関数は、スコープへのアクセス権を持つディレクティブのリンク関数を作成し、transcludeFnを使用すると、DOM操作のために複製された要素（トランスクルードされた要素）を操作したり、その要素のスコープにバインドされたデータを利用したりできます。参考までに、これはng-repeatおよびng-switchで使用されます。
6
AngularJSでフォームが無効な場合に送信ボタンを無効にする
私は私のようなフォームを持っています： <form name="myForm"> <input name="myText" type="text" ng-model="mytext" required /> <button disabled="{{ myForm.$invalid }}">Save</button> </form> ご覧のとおり、入力が空の場合、ボタンは無効になりますが、テキストが含まれている場合、ボタンは有効に戻りません。どうすれば機能させることができますか？
1
angularjsでクリックされた要素にアクセスする
私はAngularJSに比較的慣れていないので、概念を理解していないと思います。私もTwitter Bootstrapを使用していて、jQueryをロードしています。 ワークフロー：ユーザーがリストからリンクをクリックすると、「マスター」セクションが更新され、ユーザーがクリックしたリンクがアクティブクラスを取得します。 基本的なHTMLマークアップ： <ul class="list-holder" ng-controller="adminController"> <li><a ng-click="setMaster('client')">Clients</li> <li><a ng-click="setMaster('employees')">Employees</li> <li><a ng-click="setMaster('etc')>Etc...</li> </ul> jQueryでこれを行う： jQuery(".list-holder").on('click', 'a', function(event){ event.preventDefault(); jQuery(".list-holder li").removeClass('active'); jQuery(this).parent('li').addClass('active'); }); しかし、Angularを使用してサーバーからマスターリスト（JSON形式）をフェッチし、ページ上のリストを更新するため、AngularとjQueryを統合してこれを行う方法を理解できません。 これをどのように統合しますか？角度コントローラー関数の中に入ると、クリックした要素が見つからないようです。 コントローラ： function adminController($scope) { $scope.setMaster = function(obj) { // How do I get clicked element's parent li? console.log(obj); } }
173 jquery  angularjs 
12
AngularJSを使用して別のページにリダイレクトする方法は？
私はajax呼び出しを使用してサービスファイルの機能を実行しています。応答が成功した場合、ページを別のURLにリダイレクトしたいと思います。現在、私は単純なjs "window.location = response ['message'];"を使用してこれを行っています。しかし、私はそれをangularjsコードで置き換える必要があります。私はスタックオーバーフローのさまざまなソリューションを調べましたが、$ locationを使用しました。しかし、私は角度を付けるのが初めてで、それを実装するのに苦労しています。 $http({ url: RootURL+'app-code/common.service.php', method: "POST", headers: {'Content-Type': 'application/x-www-form-urlencoded'}, dataType: 'json', data:data + '&method=signin' }).success(function (response) { console.log(response); if (response['code'] == '420') { $scope.message = response['message']; $scope.loginPassword = ''; } else if (response['code'] != '200'){ $scope.message = response['message']; $scope.loginPassword = ''; } else { window.location …
6
Angular.jsディレクティブの動的テンプレートURL
routeProviderテンプレートを必要とするテンプレートにカスタムタグがありdirectiveます。version属性が右のテンプレートを要求範囲によって取り込まれます。 <hymn ver="before-{{ week }}-{{ day }}"></hymn> 何週何日であるかに基づいて、賛美歌の複数のバージョンがあります。ディレクティブを使用して正しい.html部分を入力することを期待していました。変数はによって読み取られていませんtemplateUrl。 emanuel.directive('hymn', function() { var contentUrl; return { restrict: 'E', link: function(scope, element, attrs) { // concatenating the directory to the ver attr to select the correct excerpt for the day contentUrl = 'content/excerpts/hymn-' + attrs.ver + '.html'; }, // passing in contentUrl …
10
app.configにサービスを挿入する
app.configにサービスを注入して、コントローラーが呼び出される前にデータを取得できるようにしたいと考えています。私はこのようにしてみました： サービス： app.service('dbService', function() { return { getData: function($q, $http) { var defer = $q.defer(); $http.get('db.php/score/getData').success(function(data) { defer.resolve(data); }); return defer.promise; } }; }); 構成： app.config(function ($routeProvider, dbService) { $routeProvider .when('/', { templateUrl: "partials/editor.html", controller: "AppCtrl", resolve: { data: dbService.getData(), } }) }); しかし、私はこのエラーを受け取ります： エラー：不明なプロバイダー：EditorAppからのdbService 設定を修正してこのサービスを挿入する方法は？
168 angularjs 
1
AngularJSはjQueryよりも優れていますか？[閉まっている]
休業。この質問には、より焦点を当てる必要があります。現在、回答を受け付けていません。 5年前休業。 ロックされています。この質問とトピックへの回答はロックされています。質問はトピックから外れていますが、歴史的に重要です。現在、新しい回答や相互作用を受け入れていません。 私は主にjQueryライブラリを使用しており、AngularJSの使用を開始しました。Angularの使用方法に関するいくつかのチュートリアルを読みましたが、Angularを使用する理由とタイミング、または単にjQueryを使用する場合と比較してどのような利点があるかについては、はっきりしていません。 AngularはMVCを考えるように思われます。これは、おそらくWebページをテンプレート+データの組み合わせとして表示することを意味します。{{data bindings}}動的データがあると感じるときはいつでも使用します。次に、Angularは$ scopeハンドラーを提供します。これは、静的に、またはWebサーバーへの呼び出しを介して入力できます。これは、Webページを設計するJSPの方法に特徴的に似ています。これにはAngularが必要ですか？ データ操作を伴わない単純なDOM操作（例：マウスホバーでの色の変更、クリックで要素を非表示/表示）の場合、jQueryまたはバニラJSで十分でよりクリーンです。これは、ことを前提としてモデルの角度の中のMVCがあるページのデータを反映して何でも、それゆえ、色、表示/非表示のようなCSSプロパティなどの変更は影響しませんモデルを。AngularはDOM操作に関してjQueryまたはバニラJSよりも優れていますか？ プラグインを使用してjQueryができることと比較して、Angularはそれを開発に役立てることができますか？
168 jquery  angularjs 
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.