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

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

7
ng-includeノードをテンプレートに置き換えますか?
ちょっと角度の新しい。ng-includeノードをインクルードされたテンプレートのコンテンツに置き換えることは可能ですか?たとえば、次のようになります。 <div ng-app> <script type="text/ng-template" id="test.html"> <p>Test</p> </script> <div ng-include src="'test.html'"></div> </div> 生成されるhtmlは次のとおりです。 <div ng-app> <script type="text/ng-template" id="test.html"> <p>Test</p> </script> <div ng-include src="'test.html'"> <span class="ng-scope"> </span> <p>Test</p> <span class="ng-scope"> </span> </div> </div> しかし、私が欲しいのは: <div ng-app> <script type="text/ng-template" id="test.html"> <p>Test</p> </script> <p>Test</p> </div>
85 angularjs 

9
AngularJS:ng-include内でAngular Loadスクリプトを作成するにはどうすればよいですか?
ねえ、私は角度のあるウェブページを構築しています。問題は、角度のないものがすでに構築されていることであり、それらも含める必要があります 問題はこれです。 main.htmlに次のようなものがあります。 <ngInclude src="partial.html"> </ngInclude> そして私のpartial.htmlはこのようなものを持っています <h2> heading 1 <h2> <script type="text/javascript" src="static/js/partial.js"> </script> そして、私のpartial.jsはangularjsとは何の関係もありません。ngincludeは機能し、htmlは表示されますが、ロードされているjavascriptファイルがまったく表示されません。firebug / chrome-dev-toolの使い方は知っていますが、ネットワークリクエストが行われているのを見ることができません。私は何が間違っているのですか? 私はAngularがスクリプトタグに特別な意味を持っていることを知っています。オーバーライドできますか?
85 angularjs 

6
.jsファイルに関連するAngularディレクティブtemplateUrl
いくつかの異なる場所で使用される角度ディレクティブを作成しています。私はいつもディレクティブがで使用されているアプリのファイル構造を保証することはできませんが、私は入れてユーザーに強制することができますdirective.jsし、directive.html同じフォルダ内(ない実際のファイル名を)。 ページがを評価するとき、ページはそれ自体に関連してdirective.jsいると見なしtemplateUrlます。をファイルにtemplateUrl相対するように設定することは可能directive.jsですか? または、ディレクティブ自体にテンプレートを含めることをお勧めします。 さまざまな状況に基づいてさまざまなテンプレートをロードしたいと考えているので、更新するよりも相対パスを使用できるようにしたいと思います。 directive.js

2
文字列の配列でorderbyフィルターを機能させる方法は?
動作していないコードは次のとおりです。デモ:http://jsfiddle.net/8dt94/63/ <div ng-controller="MyCtrl"> <input type="text" ng-model="searchText" /> <ul ng-repeat="strVal in arrVal|orderBy|filter:searchText" > <li>{{strVal}}</li> </ul> </div> var app=angular.module('myApp', []); app.controller('MyCtrl', function ($scope,$filter) { $scope.arrVal = ['one','two','three','four','five','six']; });
85 angularjs 

10
ng-clickでチェックボックスをクリックしても、モデルは更新されません
チェックボックスをクリックしてng-clickを呼び出す:ng-clickが起動する前にモデルが更新されないため、チェックボックスの値がUIに誤って表示されます。 これはAngularJS1.0.7で機能し、Angualar1.2-RCxでは壊れているようです。 <div ng-app="myApp" ng-controller="Ctrl"> <li ng-repeat="todo in todos"> <input type='checkbox' ng-click='onCompleteTodo(todo)' ng-model="todo.done"> {{todo.text}} </li> <hr> task: {{todoText}} <hr><h2>Wrong value</h2> done: {{doneAfterClick}} およびコントローラー: angular.module('myApp', []) .controller('Ctrl', ['$scope', function($scope) { $scope.todos=[ {'text': "get milk", 'done': true }, {'text': "get milk2", 'done': false } ]; $scope.onCompleteTodo = function(todo) { console.log("onCompleteTodo -done: " …

4
ng-initで複数の値を宣言します
したがって、奇妙なハッシュを作成せずに、単一のng-init内で複数の値を宣言するにはどうすればよいのでしょうか。その場合は、常に具体的にアクセスする必要があります。 だから基本的に欲しい <div ng-init="a = 1, b = 2">{{a}}</div> そして私は私がする必要を避けたいと言っています <div ng-init="unecessary_bs = {a: 1, b: 2}">{{unecessary_bs.a}}</div> しかし合理的: <div ng-init="a = 1, b = 2">{{a}}</div> 動作していないようです。 期待される感謝

8
Karma + AngularJSテスト内のモックJSONファイルの読み込み
Karma + Jasmineを使用したテストでAngularJSアプリをセットアップしました。大きなJSONオブジェクトを受け取り、それをアプリの他の部分でより使いやすい形式に変換し、変換されたオブジェクトを返す、テストしたい関数があります。それでおしまい。 私のテストでは、モックJSONコンテンツのみを含む個別のJSONファイル(* .json)が必要です。スクリプトはありません。テストでは、JSONファイルを読み込んで、テストしている関数にオブジェクトを送り込めるようにしたいと思います。 http://dailyjs.com/2013/05/16/angularjs-5/で説明されているように、モックファクトリ内にJSONを埋め込むことができることはわかっていますが、JSONをスクリプトに含めないでください。ストレートJSONだけです。ファイル。 私はいくつかのことを試しましたが、私はこの分野ではかなり初心者です。まず、JSONファイルを含めるようにKarmaを設定して、それが何をするかを確認します。 files = [ ... 'mock-data/**/*.json' ... ] その結果、次のようになりました。 Chrome 27.0 (Mac) ERROR Uncaught SyntaxError: Unexpected token : at /Users/aaron/p4workspace4/depot/sitecatalyst/branches/anomaly_detection/client/anomaly-detection/mock-data/two-metrics-with-anomalies.json:2 そこで、ファイルを「含める」のではなく、ファイルを提供するように変更しました。 files = [ ... { pattern: 'mock-data/**/*.json', included: false } ... ] 提供されるだけなので、仕様内から$ httpを使用してファイルをロードしようと思いました。 $http('mock-data/two-metrics-with-anomalies.json') 受け取った仕様を実行したとき: Error: Unexpected request: GET mock-data/two-metrics-with-anomalies.json 私の理解では、これは$ httpBackendからの模擬応答を期待していることを意味します。だから...この時点では、Angularユーティリティを使用してファイルをロードする方法がわからなかったので、jQueryを試して、少なくともそれを機能させることができるかどうかを確認したいと思いました。 …

5
AngularJS:ファクトリ$ http.getJSONファイル
ハードコードされたJSONファイルだけを使用してローカルで開発したいと考えています。私のJSONファイルは次のとおりです(JSONバリデーターに入れると有効です): { "contentItem": [ { "contentID" : "1", "contentVideo" : "file.mov", "contentThumbnail" : "url.jpg", "contentRating" : "5", "contentTitle" : "Guitar Lessons", "username" : "Username", "realname" : "Real name", "contentTags" : [ { "tag" : "Guitar"}, { "tag" : "Intermediate"}, { "tag" : "Chords"} ], "contentAbout" : "Learn how to play …
84 json  http  angularjs  factory 

7
Angularjsの動的ngパターン検証
チェックボックスがfalseの場合、ng-requiredディレクティブを使用してテキスト入力の検証を強制するフォームがあります。チェックボックスがtrueの場合、フィールドは非表示になり、ng-requiredはfalseに設定されます。 問題は、入力で指定された検証用の正規表現もあり、ng-patternangularディレクティブを利用していることです。私が直面している問題は、ユーザーが無効な電話番号を入力した場合、その入力を無効にするチェックボックスをオンにすると(したがって、それ以上の検証は必要ありません)、ng-patternに基づいて無効であるため、フォームは送信を許可しません。 ng-change関数を追加して入力モデルをnullに設定することでこの問題を解決しようとしましたが、ng-pattern、したがってフィールドはチェックボックスの初期セットでfalseに設定されたままです。ただし、チェックボックスをオフにして、すべてを最初のフォームの読み込みに戻し、もう一度チェックボックスをオンにすると、フォームは有効になり、送信できるようになります。何が欠けているのかわかりません。これが私がこれまでに持っているng-changeコードです: var phoneNumberRegex = /^\(?(\d{3})\)?[ .-]?(\d{3})[ .-]?(\d{4})$/; $scope.phoneNumberPattern = phoneNumberRegex; $scope.removeValidation = function() { if ($scope.cell._newUser === false) { $scope.request._number = ''; $scope.phoneNumberPattern = /[0-9a-zA-Z]?/; } else { $scope.phoneNumberPattern = phoneNumberRegex; } };

3
AngularJS + JQuery:動的コンテンツをangularjsで機能させる方法
私はjQueryとAngularJSの両方を使用してAjaxアプリに取り組んでいます。 jQueryを使用してdivのコンテンツ(AngularJSバインディングを含む)を更新すると html関数すると、AngularJSバインディングが機能しません。 以下は私がやろうとしていることのコードです: $(document).ready(function() { $("#refreshButton").click(function() { $("#dynamicContent").html("<button ng-click='count = count + 1' ng-init='count=0'>Increment</button><span>count: {{count}} </span>") }); }); </style><script src="http://docs.angularjs.org/angular-1.0.1.min.js"></script><style>.ng-invalid { border: 1px solid red; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app=""> <div id='dynamicContent'> <button ng-click="count = count + 1" ng-init="count=0"> Increment </button> <span>count: {{count}} </span> </div> <button id='refreshButton'> …
84 jquery  angularjs 

7
カルマユニットテスト中に画像の404警告を修正する方法
grunt / karma / phantomjs / jasmineを使用して、ディレクティブの1つ(angularjs)をユニットテストしています。私のテストは正常に実行されます describe('bar foo', function () { beforeEach(inject(function ($rootScope, $compile) { elm = angular.element('<img bar-foo src="img1.png"/>'); scope = $rootScope.$new(); $compile(elm)(); scope.$digest(); })); .... }); しかし、私はこれらの404を取得します WARN [web-server]: 404: /img1.png WARN [web-server]: 404: /img2.png ... それらは何もしませんが、ログ出力にノイズを追加します。これを修正する方法はありますか?(もちろん、カルマのlogLevelを変更せずに、見たいので)

1
angle.jsでHTML5プッシュステートを使用する
Angularjsで使用される#ナビゲーションの代わりにhtml5のpushstateを実装しようとしています。私は答えをグーグルで検索しようとしました、そしてまたまだ運がないのに角のあるircチャットルームを試しました。 これは私のcontrollers.jsです: function PhoneListCtrl($scope, $http) { $http.get('phones/phones.json').success(function(data) { $scope.phones = data; }); } function PhoneDetailCtrl($scope, $routeParams) { $scope.phoneId = $routeParams.phoneId; } function greetCntr($scope, $window) { $scope.greet = function() { $("#modal").slideDown(); } } app.js angular.module('phoneapp', []). config(['$routeProvider', function($routeProvider){ $routeProvider. when('/phones', { templateUrl: 'partials/phone-list.html', controller: PhoneListCtrl }). when('/phones/:phoneId', { templateUrl: 'partials/phone-detail.html', controller: …

5
Angular $ qpromiseが解決されたかどうかを確認する方法
通常、then()promiseを使用する場合は、呼び出しとチェーンの動作を伴う継続コードを添付するだけであることを理解しています。 ただし、プロミスでラップされた非同期呼び出しを開始してから、3秒を個別に開始して$timeout()、元のプロミスがまだ完了していない場合にのみUIアクションを実行できるようにします。(これは、低速接続、3G上のモバイルデバイスなどでのみ発生すると予想されます) 約束が与えられたら、ブロックしたり待ったりせずに、それが完了したかどうかを確認できますか?
84 angularjs  promise  q 

2
AngularJSフィルターが等しくない
非常に基本的な質問のようですが、構文を正しく理解できません。 <li class="list-group-item" ng-repeat="question in newSection.Questions | filter:Id != '-1'; " ng-mouseenter="hover = true" ng-mouseleave="hover = false"> <div href="#" editable-text="question.Text">{{question.Text}}</div> </li> 私が欲しいのは、idが-1でないすべての質問を表示することです。私は何が間違っているのですか。ありがとう!

3
Angular.jsng-複数の要素にわたって繰り返します
この質問はここで部分的に対処されています:Angular.jsng-複数のtrにまたがる繰り返し ただし、これは実際には単なる回避策であり、実際にはコアの問題に対処していません。つまり、ラッパーなしで複数の要素にわたってng-repeatを使用するにはどうすればよいでしょうか。 たとえば、jquery.accordionではh3要素とdiv要素を繰り返す必要がありますが、ng-repeatを使用してこれを行うにはどうすればよいでしょうか。

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