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

AngularJS activeは、現在のページのリンクにクラスを設定するのに何らかの方法で役立ちますか？ これには魔法のような方法があると思いますが、見つけられないようです。 私のメニューは次のようになります： <ul> <li><a class="active" href="/tasks">Tasks</a> <li><a href="/actions">Tasks</a> </ul> そして私は私のルートにそれぞれのコントローラーを持っています：TasksControllerとActionsController。 しかし、aリンク上の「アクティブ」クラスをコントローラーにバインドする方法がわかりません。 ヒントはありますか？

205 angularjs 

ビューにアイテムがng-click添付されたリストがあります。 <ul id="team-filters"> <li ng-click="foo($event, team)" ng-repeat="team in teams"> <img src="{{team.logoSmall}}" alt="{{team.name}}" title="{{team.name}}"> </li> </ul> fooディレクティブの関数でクリックイベントを処理し、クリックさ$eventれたオブジェクトへの参照として渡しますが、imgタグではなくタグへの参照を取得していますli。私は、取得するには、このようなものをしなければなりませんli。 $scope.foo = function($event, team) { var el = (function(){ if ($event.target.nodeName === 'IMG') { return angular.element($event.target).parent(); // get li } else { return angular.element($event.target); // is li } })(); ng-clickディレクティブでDOM操作を行わずに、バインドされている要素への参照を取得する簡単な方法はありますか？

204 angularjs  angularjs-directive 

現在作成中のアプリケーションのフロントエンドを構築するためのオプションを検討しており、私たちのために機能し、前進するのに最適なプラットフォームを提供するツールを評価しようとしています。 これはNode.jsプロジェクトです。私たちの最初の計画はExpressを使用してそのルートをたどることでしたが、この段階を開始する前に、そこに何があるかを検討するのが最善かもしれないと決めました。私たちのアプリケーションには、アプリケーションの観点からは関連しているが、ビューの観点からは関連していないという点で、単一ページモデルに適合しないと思われるいくつかの領域があります。 Backbone.jsやMeteorなどのクライアントを構築するために使用できるいくつかのフレームワークやAngularJSを見てきました。 これはかなり明白な質問かもしれませんが、AngularJSが純粋に単一ページのアプリケーション用であるか、またはExpressなどの複数ページのアプリケーションに使用できるかどうかは解読できないようです。 更新2013年7月17日 人々をループ内に留めておくために、プロセスを進めながらこの質問を更新します。ここではすべてを一緒に構築します。これがどれだけうまく機能するかを見ていきます。私たちよりもAngularJSに適した数人に連絡を取り、コンテキストを共有する大きなアプリケーションを分割することについて質問しましたが、1つのページで作業するのは大きすぎるかもしれません。 コンセンサスは、複数の静的ページを提供し、それらのページのみで動作するAngularJSアプリケーションを作成し、SPAのコレクションを効率的に作成し、標準のリンクを使用してそれらのアプリケーションをリンクできるということでした。ソリューションには複数のアプリケーションがあり、先に述べたように、最初に単一のコードベースを試し、そこから最適化するため、ユースケースは非常に具体的です。 更新2016年6月18日プロジェクトは崖から落ちたので、あまりにも多くを成し遂げることはできませんでした。私たちは最近再びそれを拾いましたが、もはや角度を使用しておらず、代わりにReactを使用しています。以前のアップデートで概説されているアーキテクチャをまだ使用しています。ここでは、エクスプレスアプリと自己完結型アプリを使用しています。たとえば、/chatReactチャットアプリを提供するExpressルート/projectsがあり、プロジェクトアプリを提供する別のルートがあります。など。私たちがそれをちょっと見ている方法は、各アプリがその機能セットの観点から集合ルートであり、それ自体がアプリと見なされるためにはスタンドアロンである必要があるということです。技術的には、すべての情報がそこにあります。その基本的な表現であり、使用したいクライアントサイドのアプリ構築の良さは何でもかまいません。

201 javascript  node.js  angularjs 

https://docs.angularjs.org/guide/directive このイベントをリッスンすることで、メモリリークを引き起こす可能性のあるイベントリスナーを削除できます。スコープと要素に登録されたリスナーは、破棄されるときに自動的にクリーンアップされますが、サービスにリスナーを登録した場合、または削除されていないDOMノードにリスナーを登録した場合は、自分でクリーンアップするか、メモリリークが発生するリスクがあります。 ベストプラクティス：ディレクティブは自分自身でクリーンアップする必要があります。element.on（ '$ destroy'、...）またはscope。$ on（ '$ destroy'、...）を使用して、ディレクティブが削除されたときにクリーンアップ関数を実行できます。 質問： 私はelement.on "click", (event) ->私のディレクティブの中にあります： ディレクティブが破棄されると、element.onガベージコレクションされないようにするためのへのメモリ参照はありますか？ Angularドキュメントには、ハンドラーを使用して、発行されたイベントのイベントリスナーを削除する必要があると記載$destroyされています。destroy()イベントリスナーを削除したような印象を受けましたが、そうではありませんか？

200 angularjs  memory-leaks 

HTMLソースコード <div ng-app=""> <div ng-controller="test"> <div ng-address-bar browser="html5"></div> <br><br> $location.url() = {{$location.url()}}<br> $location.search() = {{$location.search('keyword')}}<br> $location.hash() = {{$location.hash()}}<br> keyword valus is={{loc}} and ={{loc1}} </div> </div> AngularJSソースコード <script> function test($scope, $location) { $scope.$location = $location; $scope.ur = $scope.$location.url('www.html.com/x.html?keyword=test#/x/u'); $scope.loc1 = $scope.$location.search().keyword ; if($location.url().indexOf('keyword') > -1){ $scope.loc= $location.url().split('=')[1]; $scope.loc = $scope.loc.split("#")[0] } …

199 javascript  angularjs  routeparams 

次のAngular関数があります。 $scope.updateStatus = function(user) { $http({ url: user.update_path, method: "POST", data: {user_id: user.id, draft: true} }); }; しかし、この関数が呼び出されるときはいつでも、私はReferenceError: $http is not defined自分のコンソールに入っています。誰かが私がここで間違っていることを理解するのを手伝ってくれる？

199 angularjs  javascript-framework  angular-http 

プロパティにブール値があるオブジェクトにラジオボタンをバインドするときに問題が発生します。$ resourceから取得した試験問題を表示しようとしています。 HTML： <label data-ng-repeat="choice in question.choices"> <input type="radio" name="response" data-ng-model="choice.isUserAnswer" value="true" /> {{choice.text}} </label> JS： $scope.question = { questionText: "This is a test question.", choices: [{ id: 1, text: "Choice 1", isUserAnswer: false }, { id: 2, text: "Choice 2", isUserAnswer: true }, { id: 3, text: "Choice 3", …

199 angularjs  data-binding  model  radio 

スコープとテンプレートに対していくつかの操作を実行する必要があります。私はそれをlink関数または関数のいずれかで行うことができるようですcontroller（両方がスコープにアクセスできるため）。 linkコントローラではなく関数を使用する必要があるのはいつですか？ angular.module('myApp').directive('abc', function($timeout) { return { restrict: 'EA', replace: true, transclude: true, scope: true, link: function(scope, elem, attr) { /* link function */ }, controller: function($scope, $element) { /* controller function */ } }; } また、それlinkは非角の世界であると理解しています。したがって、私は$watch、$digestおよびを使用できます$apply。 linkすでにコントローラーを持っている場合、機能の重要性は何ですか？

199 javascript  angularjs  angularjs-directive 

誰かがAngularJSコントローラーのライフサイクルを明確にできますか？ コントローラはシングルトンですか、それともオンデマンドで作成/破棄されますか？ 後者の場合、コントローラーの作成/破棄のトリガーは何ですか？ 以下の例を考えてみましょう： var demoApp = angular.module('demo') .config(function($routeProvider, $locationProvider) { $routeProvider .when('/home', {templateUrl: '/home.html', controller: 'HomeCtrl'}) .when('/users',{templateUrl: '/users.html', controller: 'UsersCtrl'}) .when('/users/:userId', {templateUrl: '/userEditor.html', controller: 'UserEditorCtrl'}); }); demoApp.controller('UserEditorCtrl', function($scope, $routeParams, UserResource) { $scope.user = UserResource.get({id: $routeParams.userId}); }); 例えば： 上記の例では、に移動すると/users/1、user 1がロードされ、に設定されます$scope。 次に、に移動すると/users/2、ユーザー2が読み込まれます。同じインスタンスがUserEditorCtrl再利用されていますか、それとも新しいインスタンスが作成されていますか？ それが新しいインスタンスである場合、最初のインスタンスの破棄をトリガーするものは何ですか？ 再利用する場合、これはどのように機能しますか？（つまり、データをロードするメソッドは、コントローラーの作成時に実行されているように見えます）

199 javascript  angularjs 

ご存知のように、角と小枝の両方に共通の制御構造があります-二重中括弧。Angularのデフォルト値を変更するにはどうすればよいですか？ Twigでそれができることは知っていますが、できないのはJSだけです。

198 angularjs  twig 

モジュール内では、コントローラーは外部コントローラーからプロパティを継承できます。 var app = angular.module('angularjs-starter', []); var ParentCtrl = function ($scope, $location) { }; app.controller('ChildCtrl', function($scope, $injector) { $injector.invoke(ParentCtrl, this, {$scope: $scope}); }); 例：デッドリンク：http : //blog.omkarpatil.com/2013/02/controller-inheritance-in-angularjs.html モジュール内のコントローラーも兄弟から継承できますか？ var app = angular.module('angularjs-starter', []); app.controller('ParentCtrl ', function($scope) { //I'm the sibling, but want to act as parent }); app.controller('ChildCtrl', function($scope, $injector) { …

198 angularjs  inheritance  angularjs-controller 

宣言されている要素にさらにディレクティブを追加する処理を行うディレクティブを作成しようとしています。たとえばdatepicker、datepicker-languageとの追加を処理するディレクティブを作成したいとしng-required="true"ます。 これらの属性を追加してから使用する$compileと、明らかに無限ループが生成されるので、必要な属性をすでに追加しているかどうかを確認しています。 angular.module('app') .directive('superDirective', function ($compile, $injector) { return { restrict: 'A', replace: true, link: function compile(scope, element, attrs) { if (element.attr('datepicker')) { // check return; } element.attr('datepicker', 'someValue'); element.attr('datepicker-language', 'en'); // some more $compile(element)(scope); } }; }); もちろん、$compile要素を指定しない場合、属性は設定されますが、ディレクティブはブートストラップされません。 このアプローチは正しいですか、それとも間違っていますか？同じ動作を実現するより良い方法はありますか？ UDPATE：$compileこれを達成する唯一の方法であるという事実を踏まえて、最初のコンパイルパスをスキップする方法はありますか（要素に複数の子が含まれる場合があります）？たぶん設定terminal:true？ UPDATE 2：ディレクティブをselect要素に入れてみましたが、予想どおり、コンパイルが2回実行されoptionます。つまり、予想されるの数が2倍になります。

197 javascript  angularjs  model-view-controller  mvvm  angularjs-directive 

cdnjs のAngular-UI-Bootstrapページで、 Twitterのブートストラップ用のネイティブAngularJS（Angular）ディレクティブ。小さなフットプリント（gB圧縮された5 kB！）、サードパーティのJavaScript依存関係（jQuery、Bootstrap JavaScript）は不要です！ ...とのオプションがあります //cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.6.0/ui-bootstrap-tpls.min.js そして //cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.6.0/ui-bootstrap.min.js これらを比較すると微妙な違いが見られ、ドキュメントが見つからないようです... 要するに、カスタマイズしたテンプレートを作成するのでない限り、tplsを使用してください。 それはここに文書化されています：github.com/angular-ui/bootstrap/tree/gh-pages#build-files（ホームページからもリンクされています）。つまり、-tplsバージョンにはデフォルトのBootstrapテンプレートがバンドルされています。いずれの場合も、リストされたファイルの1つのみを含める必要があります。-ありがとうpkozlowski.opensource

196 angularjs  angular-ui  angular-ui-bootstrap 

AngularとPhonegapを使用して、リモートサーバーにあるが問題に遭遇したビデオを読み込もうとしています。私のJSONでは、URLはプレーンなHTTP URLとして入力されています。 "src" : "http://www.somesite.com/myvideo.mp4" 私のビデオテンプレート <video controls poster="img/poster.png"> <source ng-src="{{object.src}}" type="video/mp4"/> </video> 他のすべてのデータが読み込まれますが、コンソールを見ると、次のエラーが発生します。 Error: [$interpolate:interr] Can't interpolate: {{object.src}} Error: [$sce:insecurl] Blocked loading resource from url not allowed by $sceDelegate policy. URL $compileProvider構成設定を追加してみましたが、問題は解決しませんでした。 $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|tel):/); クロスドメインの問題に関するこの投稿を見ましたが、これを解決する方法やどの方向に進むべきかわかりません。何かアイデアはありますか？どんな助けでもありがたいです

195 javascript  angularjs  cordova 

これは、angularjsのディレクティブで理解するのが最も難しい概念の1つだと思います。 http://docs.angularjs.org/guide/directiveからのドキュメントは言う： transclude-要素のコンテンツをコンパイルして、ディレクティブで利用できるようにします。通常、ngTranscludeと共に使用されます。トランスクルージョンの利点は、リンク機能が正しいスコープに事前バインドされたトランスクルージョン機能を受け取ることです。通常の設定では、ウィジェットは分離スコープを作成しますが、トランスクルージョンは子ではなく分離スコープの兄弟です。これにより、ウィジェットがプライベート状態を持ち、トランスクルージョンが親（事前分離）スコープにバインドされるようになります。 true-ディレクティブのコンテンツをトランスクルードします。 'element'-低い優先度で定義されたディレクティブを含む要素全体をトランスクルードします。 それは言うtransclude一般的に使用しましたngTransclude。ただし、ngTranscludeのドキュメントのサンプルでは、ngTranscludeディレクティブをまったく使用していません。 これを理解するのに役立つ良い例をいくつか教えてください。なぜそれが必要なのですか？それは何を解決しますか？どうやって使うのですか？

195 angularjs  angularjs-directive