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

ビューにアイテムが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 

スコープとテンプレートに対していくつかの操作を実行する必要があります。私はそれを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 

宣言されている要素にさらにディレクティブを追加する処理を行うディレクティブを作成しようとしています。たとえば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 

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

195 angularjs  angularjs-directive 

いつtransclude: 'true'、いつ使用すればよいtransclude: 'element'ですか？私transclude: 'element'は角度のドキュメントで何も見つけることができません、彼らはかなり混乱しています。 誰かが簡単な言葉でこれを説明できたら幸いです。各オプションのメリットは何ですか？それらの本当の違いは何ですか？ これは私が見つけたものです： transclude: true コンパイル関数内で、transcludeリンク関数を使用してDOMを操作したり、HTMLタグでngTranscludeディレクティブを使用して、変換されたDOMをテンプレートに挿入したりできます。 そして transclude: ‘element’ これにより、要素全体がトランスクルードされ、トランスクルードリンク関数がコンパイル関数に導入されます。スコープがまだ作成されていないため、ここにスコープにアクセスできません。コンパイル関数は、スコープへのアクセス権を持つディレクティブのリンク関数を作成し、transcludeFnを使用すると、DOM操作のために複製された要素（トランスクルードされた要素）を操作したり、その要素のスコープにバインドされたデータを利用したりできます。参考までに、これはng-repeatおよびng-switchで使用されます。

176 angularjs  angularjs-directive  angularjs-ng-transclude 

routeProviderテンプレートを必要とするテンプレートにカスタムタグがありdirectiveます。version属性が右のテンプレートを要求範囲によって取り込まれます。 <hymn ver="before-{{ week }}-{{ day }}"></hymn> 何週何日であるかに基づいて、賛美歌の複数のバージョンがあります。ディレクティブを使用して正しい.html部分を入力することを期待していました。変数はによって読み取られていませんtemplateUrl。 emanuel.directive('hymn', function() { var contentUrl; return { restrict: 'E', link: function(scope, element, attrs) { // concatenating the directory to the ver attr to select the correct excerpt for the day contentUrl = 'content/excerpts/hymn-' + attrs.ver + '.html'; }, // passing in contentUrl …

169 angularjs  angularjs-directive 

特定の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でのカスタムディレクティブの実装でのこれらのシンボルの使用についてはたくさん読んだことがありますが、コンセプトはまだはっきりしていません。つまり、カスタムディレクティブでスコープ値の1つを使用するとはどういう意味ですか？ var mainApp = angular.module("mainApp", []); mainApp.directive('modalView',function(){ return{ restrict:'E', scope:'@' OR scope:'&' OR scope:'=' OR scope:'>' OR scope:true } }); コードスニペットを実行する結果を非表示スニペットを展開 ここのスコープで正確に何をしているのですか？ また、公式ドキュメントに"scope： '>'"が存在するかどうかもわかりません。私のプロジェクトで使用されています。 編集-1 「scope： '>'」の使用は私のプロジェクトの問題であり、修正されました。

151 angularjs  angularjs-directive  angularjs-scope 

私はAngularJSについて学び始め、ng-appとdata-ng-appディレクティブの違いは何なのか混乱しています。

147 angularjs  angularjs-directive 

私はangularjsから始めて、いくつかの古いJQueryプラグインをAngularディレクティブに変換する作業をしています。（要素）ディレクティブのデフォルトオプションのセットを定義したいのですが、属性にオプション値を指定することでオーバーライドできます。 私は他の人がこれを行った方法を見回してきました、angular-uiライブラリではui.bootstrap.paginationが同様のことをしているようです。 最初に、すべてのデフォルトオプションが定数オブジェクトで定義されます。 .constant('paginationConfig', { itemsPerPage: 10, boundaryLinks: false, ... }) 次に、getAttributeValueユーティリティ関数がディレクティブコントローラにアタッチされます。 this.getAttributeValue = function(attribute, defaultValue, interpolate) { return (angular.isDefined(attribute) ? (interpolate ? $interpolate(attribute)($scope.$parent) : $scope.$parent.$eval(attribute)) : defaultValue); }; 最後に、これはリンク関数で属性を読み込むために使用されます。 .directive('pagination', ['$parse', 'paginationConfig', function($parse, config) { ... controller: 'PaginationController', link: function(scope, element, attrs, paginationCtrl) { var boundaryLinks = paginationCtrl.getAttributeValue(attrs.boundaryLinks, config.boundaryLinks); …

145 javascript  angularjs  angularjs-directive  options  default-value 

$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": …

132 javascript  angularjs  angularjs-directive 

私が作成しているアプリケーションでは、このイメージがロードされる可能性がある前に、ユーザーが4つの情報を設定する必要があります。この画像はアプリケーションの中心部分であるため、壊れた画像リンクにより、全体が壊れているように見えます。別の画像を404に置きたいのですが。 何か案は？このためのカスタムディレクティブを作成しないようにしたいと思います。 特にドキュメントの最初の質問が同じである場合、特に同様の質問が見つからないことに驚きました。 http://docs.angularjs.org/api/ng.directive:ngSrc

129 angularjs  angularjs-directive 

等号の後の疑問符には特別な意味がありますか？つまり： scope: {foo: '=?'} 上記は、「foo」を解決できない場合にエラーを発生させないことを意味しますか？

127 angularjs  angularjs-directive 

angularjsを使用したサンプルアプリケーションを書いています。Chromeブラウザで以下のエラーが発生しました。 エラーは エラー：[ng：areq] http://errors.angularjs.org/1.3.0-beta.17/ng/areq?p0=ContactController&p1=not%20a%20function%2C%20got%20undefined これは 引数「ContactController」は関数ではないため、定義されていません コード <!DOCTYPE html> <html ng-app> <head> <script src="../angular.min.js"></script> <script type="text/javascript"> function ContactController($scope) { $scope.contacts = ["abcd@gmail.com", "abcd@yahoo.co.in"]; $scope.add = function() { $scope.contacts.push($scope.newcontact); $scope.newcontact = ""; }; } </script> </head> <body> <h1> modules sample </h1> <div ng-controller="ContactController"> Email:<input type="text" ng-model="newcontact"> <button ng-click="add()">Add</button> <h2> Contacts </h2> …

123 javascript  angularjs  angularjs-directive  angularjs-scope 

templateUrl定義されているAngularJSディレクティブがあります。私はそれをジャスミンでユニットテストしようとしています。 私のJasmine JavaScriptは、この推奨に従って、次のようになります。 describe('module: my.module', function () { beforeEach(module('my.module')); describe('my-directive directive', function () { var scope, $compile; beforeEach(inject(function (_$rootScope_, _$compile_, $injector) { scope = _$rootScope_; $compile = _$compile_; $httpBackend = $injector.get('$httpBackend'); $httpBackend.whenGET('path/to/template.html').passThrough(); })); describe('test', function () { var element; beforeEach(function () { element = $compile( '<my-directive></my-directive>')(scope); angular.element(document.body).append(element); }); afterEach(function () …

122 angularjs  angularjs-directive  jasmine