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

カスタムディレクティブのスコープ外で発生するクリックイベントがあるため、 "ng-click"属性を使用する代わりに、jQuery.click（）リスナーを使用して、スコープ内で次のように関数を呼び出します。 $('html').click(function(e) { scope.close(); ); close（）は、次のような単純な関数です。 scope.close = function() { scope.isOpen = false; } 私の見解では、「ng-show」がisOpenに次のようにバインドされた要素があります。 <div ng-show="isOpen">My Div</div> デバッグ時に、close（）が呼び出されていること、isOpenがfalseに更新されていることがわかりましたが、AngularJSビューは更新されていません。Angularに手動でビューを更新するように指示する方法はありますか？または、この問題を解決するために私が見ないより「角度のある」アプローチはありますか？

168 javascript  angularjs 

Angularjsでフィルターがどのように機能するかを調べていたところ、2組の括弧を送信する必要があることがわかりました。 $filter('number')(number[, fractionSize]) それは何を意味し、JavaScriptでどのように処理しますか？

168 javascript  angularjs 

ng-repeatを使用して作成されたテーブルがあります。テーブルの各要素に検証を追加したい。問題は、各入力セルの名前がその上下のセルと同じであることです。{{$index}}入力に名前を付けるために値を使用しようとしましたが、HTMLの文字列リテラルは正しく表示されていますが、現在は機能しています。 これが今の私のコードです： <tr ng-repeat="r in model.BSM "> <td> <input ng-model="r.QTY" class="span1" name="QTY{{$index}}" ng-pattern="/^[\d]*\.?[\d]*$/" required/> <span class="alert-error" ng-show="form.QTY{{$index}}.$error.pattern"><strong>Requires a number.</strong></span> <span class="alert-error" ng-show="form.QTY{{$index}}.$error.required"><strong>*Required</strong></span> </td> </tr> {{}}fromインデックスを削除しようとしましたが、それも機能しません。現在、入力の検証プロパティは正しく機能していますが、エラーメッセージは表示されません。 誰か提案がありますか？ 編集：以下のすばらしい回答に加えて、この問題をより詳細にカバーするブログ記事があります：http : //www.thebhwgroup.com/blog/2014/08/angularjs-html-form-design-part-2 /

167 javascript  html  angularjs  validation  grid 

オプションのパラメーターを使用してルートを設定できますか（同じテンプレートとコントローラーですが、一部のパラメーターが存在しない場合は無視する必要がありますか？ それで、次の2つのルールを書く代わりに、1つだけ持っていますか？ module.config(['$routeProvider', function($routeProvider) { $routeProvider. when('/users/', {templateUrl: 'template.tpl.html', controller: myCtrl}). when('/users/:userId', {templateUrl: 'template.tpl.html', controller: myCtrl}) }]); このようなもの（[このパラメーターはオプション]） when('/users[/:userId]', {templateUrl: 'template.tpl.html', controller: myCtrl}) //note: this previous doesn't work ドキュメントには何も見つかりませんでした。

166 angularjs  angularjs-routing 

一連の<li>要素があります。 <ul> <li ng-class="{current: selected == 100}"> <a href ng:click="selected=100">ABC</a> </li> <li ng-class="{current: selected == 101}"> <a href ng:click="selected=101">DEF</a> </li> <li ng-class="{current: selected == $index }" ng-repeat="x in [4,5,6,7]"> <a href ng:click="selected=$index">A{{$index}}</a> </li> </ul> ユーザーが上記の住所要素の1つをクリックすると、そのはずです。その場合、選択された値を設定し、<DIV>以下の要素の1つを表示します。 <div ng:show="selected == 100">100</div> <div ng:show="selected == 101">101</div> <div ng-repeat="x in [4,5,6,7]" ng:show="selected == $index">{{ …

166 angularjs 

私はそれぞれ約10フィールド、約2MBのデータを持つ数千行の巨大なデータセットを持っています。ブラウザで表示する必要があります。最も単純なアプローチ（データをフェッチし$scope、それをに入れ、ng-repeat=""その仕事を任せます）は問題なく機能しますが、DOMへのノードの挿入を開始すると、ブラウザーが約30分間フリーズします。この問題にどのように取り組むべきですか？ 1つのオプションは、行を$scopeインクリメンタルに追加し、ngRepeat1つのチャンクをDOMに挿入し終えるまで待ってから、次のチャンクに移動することです。ただし、AFAIK ngRepeatは、「繰り返し」が終了してもレポートを返さないため、醜くなります。 その他のオプションは、サーバー上のデータをページに分割し、それらを複数のリクエストでフェッチすることですが、さらに醜いです。 Angularのドキュメントを調べてのようなものを探しng-repeat="data in dataset" ng-repeat-steps="500"ましたが、何も見つかりませんでした。私はAngularの方法にかなり慣れていないので、ポイントを完全に逃している可能性があります。これのベストプラクティスは何ですか？

165 javascript  angularjs  angularjs-ng-repeat 

特にブートストラップがとても人気になったので、これがダッシュを使用するスタイルで頭痛を救うことを願っています。 私は角度1.0.5を使用しています <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script> でngClassのドキュメント、例は単純ですが、それはまた、式はブール値にクラス名のマップすることができ言及しています。ブール変数に応じて、ブートストラップのドキュメントに示されているように、アイコンに「アイコンホワイト」スタイルを使用しようとしました。 <i class="icon-home" ng-class="{icon-white: someBooleanValue}"> 上記の行は機能しません。trueのicon-white場合、クラスには追加されませんsomeBooleanValue。ただし、キーをに変更するとiconWhite、クラス値のリストに正常に追加されます。どのようにダッシュで値を追加しますか？

165 angularjs 

これは私が得るエラーメッセージです： Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://www.youtube.com') does not match the recipient window's origin ('http://localhost:9000'). ターゲットの起点がhttp://www.youtube.comあり、受信者の起点が他にもある他の同様の問題を見たことがありますhttps://www.youtube.comが、ターゲットがhttps://www.youtube.comあり、起点がどこにあるのかはわかりませんhttp://localhost:9000。 問題はありません。何が問題ですか？ どうすれば修正できますか？

165 javascript  angularjs  youtube  youtube-api  youtube-iframe-api 

ページのコンテンツが読み込まれた後に呼び出す関数があります。$ viewContentLoadedについて読みましたが、うまくいきません。私は何かを探しています document.addEventListener('DOMContentLoaded', function () { //Content goes here }, false); 上記の呼び出しは、AngularJsコントローラーでは機能しません。

163 angularjs  events  loaded 

閉まっている。この質問はスタックオーバーフローのガイドラインを満たしていません。現在、回答を受け付けていません。 この質問を改善してみませんか？Stack Overflowのトピックとなるように質問を更新します。 5年前休業。 この質問を改善する アプリケーションを構築するときに使用するAngularの命名規則について、公式または最も受け入れられているリファレンスが存在するかどうか誰かが知っていますか？ Angularには、フィルター、ディレクティブ、サービスなど、さまざまなタイプのコンポーネントがたくさんあります。アプリケーションに実装するときに参照の命名規則があることは意味があることに同意しませんか？ 例えば： 新しいフィルターを作成する必要がある場合、[Something] Filterやfilter [Something]などの名前をどのように付ければよいでしょうか？ 同じことがコントローラ、サービス、ディレクティブなどにも当てはまります。 他に気になるのは、スコープに属する変数/関数に特別な接頭辞または接尾辞を付ける必要があるかどうかです。状況によっては、関数やその他のコード（角度コードなし）と区別する方法があると便利な場合があります。

162 angularjs 

次のファイルは「機能」します（エラーをスローしないという意味です）。 <!doctype html> <html ng-app="modx"> <script src="http://code.angularjs.org/angular-1.0.0rc7.js"></script> <script> angular.module("modx", [], function($routeProvider) { }); </script> </html> しかしこれは <!doctype html> <html ng-app="modx"> <script src="http://code.angularjs.org/angular-1.0.0rc7.js"></script> <script> angular.module("modx", [], function($routeProvider, $rootScope) { }); </script> </html> エラーを与える： エラー：不明なプロバイダー：modx ソースファイルの$ rootScope ：http : //code.angularjs.org/angular-1.0.0rc7.js 行：2491 WTF？

162 angularjs 

AngularJSでサービスプロパティにバインドする方法のベストプラクティスを探しています。 AngularJSを使用して作成されたサービスのプロパティにバインドする方法を理解するために、複数の例に取り組みました。 以下に、サービスのプロパティにバインドする方法の2つの例を示します。どちらも機能します。最初の例では基本的なバインディングを使用し、2番目の例では$ scope。$ watchを使用してサービスプロパティにバインドしました これらの例のいずれかがサービスのプロパティにバインドするときに推奨されますか、それとも私が知らない、推奨される別のオプションがありますか？ これらの例の前提は、サービスがそのプロパティを「lastUpdated」と「calls」を5秒ごとに更新する必要があることです。サービスのプロパティが更新されると、ビューにこれらの変更が反映されます。これらの例はどちらも正常に機能します。それを行うより良い方法があるのだろうか。 基本的なバインディング 次のコードは、ここで表示および実行できます。http：//plnkr.co/edit/d3c16z <html> <body ng-app="ServiceNotification" > <div ng-controller="TimerCtrl1" style="border-style:dotted"> TimerCtrl1 <br/> Last Updated: {{timerData.lastUpdated}}<br/> Last Updated: {{timerData.calls}}<br/> </div> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script> <script type="text/javascript"> var app = angular.module("ServiceNotification", []); function TimerCtrl1($scope, Timer) { $scope.timerData = Timer.data; }; app.factory("Timer", function ($timeout) { var data = { …

162 angularjs  data-binding  angularjs-service  angularjs-controller 

現在のところ、この質問は、Q＆A形式には適していません。事実、参考文献、専門知識によって回答が裏付けられることを期待していますが、この質問は、討論、議論、投票、または拡張ディスカッションを求める可能性があります。この質問が改善され、場合によっては再開できると思われる場合は、ヘルプセンターにアクセスしてください。 7年前休業。 AngularJSは、インタラクティブなHTML5とモデルバインディングに関して非常に強力です。一方、YiiのようなPHPフレームワークを使用すると、迅速かつ適切に構造化された、安全で強力なWebアプリケーション開発が可能になります。どちらのテクノロジーも、データアクセス、反復、ページレイアウトのための高度な手段を提供します。 これらの2つのアプローチ（クライアント側とサーバー側の「ページ設定」）を混合することは良い習慣ですか、それとも悪い対話式でシームレスなHTML5 AJAX Webアプリケーションの意味に反していますか？ PHPを使用してJSを生成することについて話しているのではありません（この質問を参照してください）-AngularJSを利用するビューを生成することについて話しているのです。 AngularJSページは、たとえばPHP変数から直接取得する代わりに、RESTサービスを介してサーバーと通信してデータを取得する必要がある（またはできる）ことも知っています（この質問を参照）。しかし、私にとっては、PHPでWebアプリケーション全体の「フレーム」を個別に設計する方が便利なようです（たとえば、メインメニューを作成するか、認証/セッションを処理するなど）。

161 php  web-applications  angularjs 

特定のcallback属性を分離スコープで使用するフォームディレクティブがあります。 scope: { callback: '&' } それは内部にあるng-repeatので、私が渡す式にはid、コールバック関数への引数としてオブジェクトのが含まれています。 <directive ng-repeat = "item in stuff" callback = "callback(item.id)"/> ディレクティブを使い終えると、$scope.callback()コントローラー関数から呼び出されます。ほとんどの場合、これで問題ありませんし、やりたいことはこれだけですが、場合によっては、directiveそれ自体の内部から別の引数を追加したいこともあります。 これを可能にする角度式はありますか：$scope.callback(arg2)、callbackで呼び出されarguments = [item.id, arg2]ますか？ そうでない場合、これを行うための最も近い方法は何ですか？ これが機能することがわかりました： <directive ng-repeat = "item in stuff" callback = "callback" callback-arg="item.id"/> と scope { callback: '=', callbackArg: '=' } ディレクティブ呼び出し $scope.callback.apply(null, [$scope.callbackArg].concat([arg2, arg3]) ); しかし、私はそれが特にきちんとしているとは思いません、それは分離スコープに余分なものを置くことを含みます。 もっと良い方法はありますか？ ここにプランカー遊び場があります（コンソールを開いたままにします）。

160 javascript  angularjs  angularjs-directive  angularjs-scope 

angularJSの例があります <div ng-controller="testCtrl"> <test color1="color1" updateFn="updateFn()"></test> </div> <script> angular.module('dr', []) .controller("testCtrl", function($scope) { $scope.color1 = "color"; $scope.updateFn = function() { alert('123'); } }) .directive('test', function() { return { restrict: 'E', scope: {color1: '=', updateFn: '&'}, template: "<button ng-click='updateFn()'>Click</button>", replace: true, link: function(scope, elm, attrs) { } } }); </script> </body> …

160 angularjs