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

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


9
AngularJS UIルーター-状態を再読み込みせずにURLを変更する
現在、私たちのプロジェクトはdefaultを使用して$routeProviderおり、私はこの「ハック」を使用して、urlページをリロードせずに変更します: services.service('$locationEx', ['$location', '$route', '$rootScope', function($location, $route, $rootScope) { $location.skipReload = function () { var lastRoute = $route.current; var un = $rootScope.$on('$locationChangeSuccess', function () { $route.current = lastRoute; un(); }); return $location; }; return $location; }]); そして controller $locationEx.skipReload().path("/category/" + $scope.model.id).replace(); ルートをネストrouteProviderするui-routerためにで置き換えることを考えていますが、これを見つけることができませんui-router。 可能ですか-同じことをしてください angular-ui-routerですか?ください? なぜこれが必要なのですか?例を挙げて説明し ます。新しいカテゴリを作成するためのルートはSAVEで表示された/category/new 後clicking、success-alertルート/category/newを変更したいと思います/caterogy/23(23-は、dbに格納されている新しいアイテムのIDです)

6
AngularJSとng-repeatを使用したselectの初期化
AngularJS 1.1.5でng-repeatを使用して、事前に入力されたオプションで選択ボックスを開始しようとしています。その代わり、選択は常に何も選択されていない状態から始まります。空のオプションもありますが、これは必要ありません。何も選択されていないという副作用があると思います。 ng-repeatの代わりにng-optionsを使用してこれを機能させることができますが、この場合はng-repeatを使用したいと思います。絞り込んだ例では表示していませんが、各オプションのtitle属性も設定したいので、ng-optionsを使用してこれを行う方法はありません。 これは一般的なAngularJのスコープ/プロトタイプ継承の問題に関連しているとは思いません。少なくとも私はバタランで調べたときに何も明白なものを見ていません。さらに、UIの選択でオプションを選択すると、モデルは正しく更新されます。 HTMLは次のとおりです。 <body ng-app ng-controller="AppCtrl"> <div> Operator is: {{filterCondition.operator}} </div> <select ng-model="filterCondition.operator"> <option ng-repeat="operator in operators" value="{{operator.value}}" > {{operator.displayName}} </option> </select> </body> そしてJavaScript: function AppCtrl($scope) { $scope.filterCondition={ operator: 'eq' } $scope.operators = [ {value: 'eq', displayName: 'equals'}, {value: 'neq', displayName: 'not equal'} ] } JS Fiddle for …

5
ngResourceよりもRestangularを使用する利点は何ですか?
ngResourceものを実装することはすでに本当に簡単に思えます ... ngResourceよりもRestangularを使用する利点/欠点は何ですか? 1.1.3 $resourceは約束を返し、最新のPRコミットを使用して実装できます。$resourceRestangularが行う追加の動詞をサポートするために、将来のサポートは提供されますか?そして、それが起こった場合、Restangularは消えて無関心になるようです。

10
$ applyは既に進行中です
スタックトレース: Error: $apply already in progress at Error (<anonymous>) at beginPhase (file:///android_asset/www/built.min.js:7:22740) at Object.Scope.$apply (file:///android_asset/www/built.min.js:7:25967) at navigator.geolocation.getCurrentPosition.that (file:///android_asset/www/built.min.js:13:8670) at Object.geolocation.getCurrentPosition (file:///android_asset/www/plugins/org.apache.cordova.core.geolocation/www/geolocation.js:122:13) at Object.getCurrentPosition (file:///android_asset/www/built.min.js:13:8589) at Object.getCurrentPosition (file:///android_asset/www/built.min.js:13:8277) at Object.getCurrentCity (file:///android_asset/www/built.min.js:13:8941) at Object.$scope.locateDevice (file:///android_asset/www/built.min.js:13:10480) at file:///android_asset/www/built.min.js:7:12292:7 このコードを参照してくださいhttp://pastebin.com/B9V6yvFu getCurrentPosition: cordovaReady(function (onSuccess, onError, options) { navigator.geolocation.getCurrentPosition(function () { var that = this, args …

5
データベースからの動的HTML文字列のコンパイル
状況 私たちのAngularアプリ内にネストされているのは、ng-bind-html-unsafe属性を持つdivを含む、コントローラーによってサポートされるPageというディレクティブです。これは、「pageContent」という$ scope変数に割り当てられます。この変数には、データベースから動的に生成されたHTMLが割り当てられます。ユーザーが次のページに移動すると、DBが呼び出され、pageContent変数がこの新しいHTMLに設定され、ng-bind-html-unsafeを介して画面上にレンダリングされます。これがコードです: ページディレクティブ angular.module('myApp.directives') .directive('myPage', function ($compile) { return { templateUrl: 'page.html', restrict: 'E', compile: function compile(element, attrs, transclude) { // does nothing currently return { pre: function preLink(scope, element, attrs, controller) { // does nothing currently }, post: function postLink(scope, element, attrs, controller) { // does nothing currently …

8
AngularJSを使用してASP.NET Web APIメソッドからファイルをダウンロードする
私のAngular JSプロジェクトには<a>アンカータグがあり、クリックするとGETファイルを返すWebAPIメソッドにHTTP リクエストを送信します。 リクエストが成功したら、ファイルをユーザーにダウンロードしてもらいたい。それ、どうやったら出来るの? アンカータグ: <a href="#" ng-click="getthefile()">Download img</a> AngularJS: $scope.getthefile = function () { $http({ method: 'GET', cache: false, url: $scope.appPath + 'CourseRegConfirm/getfile', headers: { 'Content-Type': 'application/json; charset=utf-8' } }).success(function (data, status) { console.log(data); // Displays text data if the file is a text file, binary if it's an …

3
Angularディレクティブのデータ変更を$ watchする
$watch内部でデータを操作(たとえば、データの挿入または削除)するときに、Angularディレクティブで変数をトリガーできますが、その変数に新しいオブジェクトを割り当てられません。 現在JSONファイルからロードされている単純なデータセットがあります。私のAngularコントローラーはこれを行い、いくつかの関数を定義します: App.controller('AppCtrl', function AppCtrl($scope, JsonService) { // load the initial data model if (!$scope.data) { JsonService.getData(function(data) { $scope.data = data; $scope.records = data.children.length; }); } else { console.log("I have data already... " + $scope.data); } // adds a resource to the 'data' object $scope.add = function() { $scope.data.children.push({ "name": …

7
AngularJSにビュー/部分的な特定のスタイリングを含める方法
アプリケーションが使用するさまざまなビューに個別のスタイルシートを使用する適切な/受け入れられる方法は何ですか? 現在、view / partialのhtmlの上部にlink要素を配置していますが、最近のすべてのブラウザーがそれをサポートしているにもかかわらず、これは悪い習慣であると言われていますが、それが不快な理由がわかります。 他の可能性は、index.htmlに個別のスタイルシートを配置するheadことですが、パフォーマンスの名前でビューがロードされている場合にのみ、スタイルシートをロードします。 CSSがサーバーから読み込まれるまでスタイリングが有効にならず、遅いブラウザーでフォーマットされていないコンテンツがすばやくフラッシュするので、これは悪い習慣ですか?ローカルでテストしているのですが、これはまだ見ていません。 Angularに渡されたオブジェクトを介してCSSをロードする方法はあり$routeProvider.whenますか? 前もって感謝します!


7
AngularJSで$ http同期呼び出しする方法
AngularJSで同期呼び出しを行う方法はありますか? AngularJSのドキュメントは、いくつかの基本的なものを理解するためにあまり明示的でも広範囲でもありません。 サービスについて: myService.getByID = function (id) { var retval = null; $http({ url: "/CO/api/products/" + id, method: "GET" }).success(function (data, status, headers, config) { retval = data.Data; }); return retval; }
132 http  angularjs 

16
ng-repeatで重複した結果を除外する方法
ng-repeatJSONファイルを介して単純なを実行していて、カテゴリ名を取得したいと考えています。約100のオブジェクトがあり、それぞれがカテゴリに属していますが、カテゴリは約6つしかありません。 私の現在のコードはこれです: <select ng-model="orderProp" > <option ng-repeat="place in places" value="{{place.category}}">{{place.category}}</option> </select> 出力は100の異なるオプションで、ほとんどが重複しています。Angularを使用して{{place.category}}既に存在するかどうかを確認し、既に存在する場合はオプションを作成しないようにするにはどうすればよいですか? 編集:私のJavaScriptでは$scope.places = JSON data、明確にするためだけに

11
js関数の外部からのAngularJSアクセススコープ
外部のJavaScript関数を介してコントローラーの内部スコープにアクセスする簡単な方法があるかどうかを確認しようとしています(完全にターゲットコントローラーとは無関係です)。 私はここで他のいくつかの質問を見てきました angular.element("#scope").scope(); DOM要素からスコープを取得しますが、現在のところ、適切な結果が得られていません。 ここにjsfiddleがあります:http ://jsfiddle.net/sXkjc/5/ 私は現在、プレーンなJSからAngularへの移行を行っています。私がこれを達成しようとしている主な理由は、元のライブラリコードをできるだけそのままにしておくためです。コントローラに各機能を追加する必要がなくなります。 これを達成する方法を教えてください。上記のフィドルについてのコメントも歓迎します。

5
AngularJSをAタグのtitle属性にバインドするにはどうすればよいですか?
その目的は、サムネイルのツールチップに製品名を表示することです。ブラウザは、「ng-title」または「ng-attr-title」からツールチップを作成しません。 AngularJSバージョン1.0.7を使用しています。「ng-」または「ng-attr」を任意の属性の前に付けると、Angularがそれに応じてバインドします。ただし、HTMLの「A」タグのタイトル属性に「バインド」されていないようです。 例 1。 コード: <a title="{{product.shortDesc}}" ...> 期待される結果: <a title="Canon Powershot XS50 12MB Digital Camera" ...> 実際の結果:<a title="{{product.shortDesc}}" ...>ツールチップに不要な括弧が表示されます。 例 2。 コード: <a ng-attr-title="{{product.shortDesc}}" ...> 期待される結果: <a title="Canon Powershot XS50 12MB Digital Camera" ...> 実結果: <a ng-attr-title="Canon Powershot XS50 12MB Digital Camera" ...> 私たちは単純なtitle態度を得ることも、実用的なツールチップを得ることもありません。
131 angularjs 

17
AngularJSエラー:クロスオリジンリクエストはプロトコルスキームでのみサポートされています:http、data、chrome-extension、https
非常に単純な角度のjsアプリケーションの3つのファイルがあります index.html <!DOCTYPE html> <html ng-app="gemStore"> <head> <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js'></script> <script type="text/javascript" src="app.js"></script> </head> <body ng-controller="StoreController as store"> <div class="list-group-item" ng-repeat="product in store.products"> <h3>{{product.name}} <em class="pull-right">{{product.price | currency}}</em></h3> </div> <product-color></product-color> </body> </html> product-color.html <div class="list-group-item"> <h3>Hello <em class="pull-right">Brother</em></h3> </div> app.js (function() { var app = angular.module('gemStore', []); app.controller('StoreController', function($http){ this.products = …

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