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

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

8
ng-model、ng-repeat、およびinputの難しさ
ngRepeatおよびを使用して、ユーザーがアイテムのリストを編集できるようにしようとしていますngModel。(このフィドルを参照してください。)ただし、私が試した両方のアプローチは奇妙な動作を引き起こします。1つはモデルを更新せず、もう1つは各キーダウンでフォームをぼかします。 ここで何か悪いことをしていますか?これはサポートされているユースケースではありませんか? フィドルのコードを以下に示します。 <html ng-app> <head> <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap-combined.min.css" rel="stylesheet"> </head> <body ng-init="names = ['Sam', 'Harry', 'Sally']"> <h1>Fun with Fields and ngModel</h1> <p>names: {{names}}</p> <h3>Binding to each element directly:</h3> <div ng-repeat="name in names"> Value: {{name}} <input ng-model="name"> </div> <p class="muted">The binding does not appear to be working: the value in the …

13
AngularJS-$ http.postがJSONの代わりに要求パラメーターを送信する方法はありますか?
jQueryのpostメソッドを介してAJAX POSTリクエストを作成している古いコードがいくつかあり、次のようになります。 $.post("/foo/bar", requestData, function(responseData) { //do stuff with response } requestData いくつかの基本的な文字列プロパティを備えた単なるJavaScriptオブジェクトです。 Angularを使用するようにデータを移動している最中なので、この呼び出しを$ http.postに置き換えます。私は次のことを思いつきました: $http.post("/foo/bar", requestData).success( function(responseData) { //do stuff with response } }); これを行うと、サーバーから500エラー応答が返されました。Firebugを使用して、これが次のようなリクエスト本文を送信することがわかりました。 {"param1":"value1","param2":"value2","param3":"value3"} 成功したjQuery $.postは、次のように本文を送信します。 param1=value1&param2=value2&param3=value3 私がぶつかっているエンドポイントは、JSONではなく要求パラメーターを期待しています。だから、私の質問は$http.post、JSONの代わりにリクエストパラメータとしてjavascriptオブジェクトを送信するように指示する方法はありますか はい、私はオブジェクトから自分で文字列を作成できることを知っていますが、Angularがこれに対して何かを提供してくれるかどうか知りたいです。

7
`ui-router` $ stateParamsと$ state.params
を使用するとui-router、どちらか$stateまたは$stateParamsコントローラに挿入して、URLのパラメータにアクセスできます。ただし、を介し$stateParamsてパラメーターにアクセスすると、それにアクセスするコントローラーによって管理されている状態とその親の状態に属するパラメーターのみが公開され、$state.params子の状態にあるものも含めてすべてのパラメーターが公開されます。 次のコードを考えると、URLを直接ロードするとhttp://path/1/paramA/paramB、コントローラーがロードされたときに次のようになります。 $stateProvider.state('a', { url: 'path/:id/:anotherParam/', controller: 'ACtrl', }); $stateProvider.state('a.b', { url: '/:yetAnotherParam', controller: 'ABCtrl', }); module.controller('ACtrl', function($stateParams, $state) { $state.params; // has id, anotherParam, and yetAnotherParam $stateParams; // has id and anotherParam } module.controller('ABCtrl', function($stateParams, $state) { $state.params; // has id, anotherParam, and yetAnotherParam $stateParams; // has id, anotherParam, …

5
Angular.js属性ディレクティブに複数の属性を渡すにはどうすればよいですか?
次のように制限されている属性ディレクティブがあります。 restrict: "A" 2つの属性を渡す必要があります。数値と関数/コールバックattrs。オブジェクトを使用してディレクティブ内でそれらにアクセスします。 ディレクティブが要素ディレクティブである場合、"E"私はこれに制限できます: <example-directive example-number="99" example-function="exampleCallback()"> ただし、理由はわからないので、ディレクティブを属性ディレクティブにする必要があります。 複数の属性を属性ディレクティブに渡すにはどうすればよいですか?

5
JWTベースの認証でファイルのダウンロードを処理する方法
私はAngularでWebアプリケーションを作成していますが、認証はJWTトークンによって処理されます。つまり、すべてのリクエストには、必要なすべての情報を含む「Authentication」ヘッダーがあります。 これはREST呼び出しではうまく機能しますが、バックエンドでホストされているファイル(Webサービスがホストされているのと同じサーバー上にあるファイル)のダウンロードリンクをどのように処理すればよいかわかりません。 <a href='...'/>ヘッダーが含まれておらず、認証が失敗するため、通常のリンクを使用できません。のさまざまな呪文についても同じですwindow.open(...)。 私が考えたいくつかの解決策: サーバー上に一時的な安全でないダウンロードリンクを生成する 認証情報をurlパラメータとして渡し、ケースを手動で処理します XHRを介してデータを取得し、ファイルクライアント側に保存します。 上記のすべてが満足できるものではありません。 1は現在使用しているソリューションです。2つの理由で私はそれが好きではありません。1つ目はセキュリティ面で理想的ではない、2つ目は機能しますが、特にサーバーでかなりの作業が必要です。何かをダウンロードするには、新しい「ランダム」を生成するサービスを呼び出す必要があります"url、それをしばらくの間(おそらくDBに)保存し、クライアントに返します。クライアントはURLを取得し、window.openなどを使用します。リクエストされた場合、新しいURLはそれがまだ有効かどうかを確認してから、データを返す必要があります。 2は、少なくとも同じくらいの作業です。 3は、利用可能なライブラリを使用していても、多くの作業と多くの潜在的な問題のようです。(自分のダウンロードステータスバーを用意し、ファイル全体をメモリに読み込んでから、ユーザーにファイルをローカルに保存するよう依頼する必要があります)。 タスクはかなり基本的なもののように思えるので、もっと簡単に使えるものが他にあるかどうか疑問に思っています。 私は必ずしも「Angular way」の解決策を探しているわけではありません。通常のJavascriptで問題ありません。

6
domのレンダリングが終了した後でディレクティブを実行するにはどうすればよいですか?
(Angular JSのドキュメントを読むことで)明らかな解決策がない一見単純な問題があります。 DOM内のコンテナーの高さを定義するために、他のDOM要素の高さに基づいていくつかの計算を行うAngular JSディレクティブがあります。 これと同様のことがディレクティブ内で行われています。 return function(scope, element, attrs) { $('.main').height( $('.site-header').height() - $('.site-footer').height() ); } 問題は、ディレクティブが実行さ$('site-header')れると見つからず、必要なjQueryでラップされたDOM要素の代わりに空の配列を返すことです。 DOMが読み込まれた後にのみ実行され、通常のjQueryセレクタースタイルのクエリを介して他のDOM要素にアクセスできるディレクティブ内で使用できるコールバックはありますか?

7
AngularJSのモジュール宣言のベストプラクティス?
アプリで多数のAngularモジュールが宣言されています。私は当初、次のような「連鎖」構文を使用してそれらを宣言し始めました。 angular.module('mymodule', []) .controller('myctrl', ['dep1', function(dep1){ ... }]) .service('myservice', ['dep2', function(dep2){ ... }]) ... // more here しかし、それを読むのは簡単ではないと判断したので、次のようなモジュール変数を使用して宣言し始めました。 var mod = angular.module('mymodule', []); mod.controller('myctrl', ['dep1', function(dep1){ ... }]); mod.service('myservice', ['dep2', function(dep2){ ... }]); ... 2番目の構文は私にはずっと読みやすいように見えますが、私の唯一の不満は、この構文はmod変数をグローバルスコープに残さないことです。という名前の変数がある場合mod、次の変数(およびグローバル変数に関連する他の問題)で上書きされます。 だから私の質問は、これが最善の方法ですか?または、このようなことをする方が良いでしょうか?: (function(){ var mod = angular.module('mymod', []); mod.controller('myctrl', ['dep1', function(dep1){ ... }]); mod.service('myservice', ['dep2', function(dep2){ …
115 angularjs 

6
ng-clickイベントを条件付きにする方法は?
私はng-repeat内にこのコードを持っています: <a href="#" class="disabled" ng-click="doSomething(object)">Do something</a> ボタンが無効になっているときにボタンが無効になるようにするにはどうすればよいclass="disabled"ですか? または、Javascriptでそれを行う方法がありますので、次のようになります: $('.do-something-button').click(function(){ if (!$(this).hasClass('disabled')) { do something } });

7
AngularJS-$ anchorScrollスムーズ/期間
AngularJSのドキュメントを読んで、$anchorScroll要素までスムーズにスクロールするための期間/イージングオプションがあるかどうかはわかりません。 それは言うだけです: $location.hash('bottom'); // call $anchorScroll() $anchorScroll(); 私はjqueryを使用せず、使用したくありません。$anchorScrollスクロールをよりスムーズにするために、作成または拡張するための賢いまだ簡単な方法はまだありますか?

6
約束を複数回解決しても安全ですか?
アプリケーションに次のコードを含むi18nサービスがあります。 var i18nService = function() { this.ensureLocaleIsLoaded = function() { if( !this.existingPromise ) { this.existingPromise = $q.defer(); var deferred = this.existingPromise; var userLanguage = $( "body" ).data( "language" ); this.userLanguage = userLanguage; console.log( "Loading locale '" + userLanguage + "' from server..." ); $http( { method:"get", url:"/i18n/" + userLanguage, cache:true …

7
Angularでは、配列内のオブジェクトを検索する必要があります
Angularでは、たくさんのオブジェクトを返すオブジェクトをスコープ内に持っています。それぞれにIDがあります(これはフラットファイルに保存されているため、DBがありません。ユーザーが使用できないようですng-resource)。 私のコントローラーでは: $scope.fish = [ {category:'freshwater', id:'1', name: 'trout', more:'false'}, {category:'freshwater', id:'2', name:'bass', more:'false'} ]; 私の見解では、デフォルトでng-showmoreで非表示になっている魚に関する追加情報がありますが、単純なshow moreタブをクリックすると、関数を呼び出しますshowdetails(fish.fish_id)。私の関数は次のようになります: $scope.showdetails = function(fish_id) { var fish = $scope.fish.get({id: fish_id}); fish.more = true; } ビューに詳細が表示されます。ただし、ドキュメントを検索した後、そのfish配列を検索する方法がわかりません。 それでは、配列をクエリするにはどうすればよいですか?そして、コンソールでどのようにしてデバッガを呼び出して、$scopeオブジェクトを操作できるようにしますか?


10
選択したng-optionが変更されたときに値を取得します
.htmlページにドロップダウンリストがあります。 落ちる: <select ng-model="blisterPackTemplateSelected" data-ng-options="blisterPackTemplate as blisterPackTemplate.name for blisterPackTemplate in blisterPackTemplates"> <option value="">Select Account</option> </select> ユーザーが値を選択したときにアクションを実行したい。だから私のコントローラーでは: コントローラ: $scope.$watch('blisterPackTemplateSelected', function() { alert('changed'); console.log($scope.blisterPackTemplateSelected); }); ただし、ドロップダウンリストの値を変更しても、コードはトリガーされません。 $scope.$watch('blisterPackTemplateSelected', function() その結果ng_change = 'changedValue()'、selectタグで:を使用して別の方法を試しました そして 関数: $scope.changedValue = function() { console.log($scope.blisterPackTemplateSelected); } ただし、これblisterPackTemplateSelectedは子スコープに格納されます。親が子スコープにアクセスできないことを読みました。 ドロップダウンリストで選択した値が変更されたときに何かを実行する正しい/最良の方法は何ですか?方法1の場合、コードで何が問題になっていますか?

3
angular.js ng-modelにjsonをロードする方法は?
おそらく非常に明白な質問だと思いますが、どこにも答えが見つかりませんでした。 サーバーからクライアントにJSONデータをロードしようとしています。現在、私はJQueryを使用して、AJAX呼び出しでそれをロードしています(以下のコード)。 <script type="text/javascript"> var global = new Array(); $.ajax({ url: "/json", success: function(reports){ global = reports; return global; } }); </script> これはhtmlファイルにあります。これまでのところ機能しますが、問題はAngularJSを使用したいことです。今、Angularは変数を使用できますが、すべてを変数にロードできないため、for eachループを使用できます。これは通常、.jsファイルにある「$ Scope」に関連しているようです。 問題は、他のページから.jsファイルにコードをロードできないことです。Angularのすべての例は、次のようなものだけを示しています: function TodoCtrl($scope) { $scope.todos = [ {text:'learn angular', done:true}, {text:'build an angular app', done:false}]; したがって、これは便利です。IA)これをすべて手で入力したい場合、かつB)私のデータがすべて事前にわかっている場合... 事前に分からない(データは動的)ので、入力したくありません。 そのため、$ Resourceを使用してAJAX呼び出しをAngularに変更しようとしても、機能しないようです。理解できないかもしれませんが、JSONデータに対する比較的単純なGETリクエストです。 tl:dr外部データを角度モデルにロードするためにAJAX呼び出しを機能させることができません。

7
AngularJSサービスにモックを挿入する
AngularJSサービスを作成しており、それを単体テストしたいと思います。 angular.module('myServiceProvider', ['fooServiceProvider', 'barServiceProvider']). factory('myService', function ($http, fooService, barService) { this.something = function() { // Do something with the injected services }; return this; }); 私のapp.jsファイルにはこれらが登録されています: angular .module('myApp', ['fooServiceProvider','barServiceProvider','myServiceProvider'] ) DIが機能していることをテストできます。 describe("Using the DI framework", function() { beforeEach(module('fooServiceProvider')); beforeEach(module('barServiceProvider')); beforeEach(module('myServiceProvder')); var service; beforeEach(inject(function(fooService, barService, myService) { service=myService; })); it("can be …

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.