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

AngularJSディレクティブは、HTMLボキャブラリを拡張することでHTMLに新しいトリックを教える方法です。ディレクティブを使用すると、宣言的なパターンでDOM要素を管理でき、低レベルのDOM操作タスクから解放されます。

9
入力フォーカスのテキストを選択
テキスト入力があります。入力がフォーカスを受け取ったら、入力内のテキストを選択します。 jQueryでは、次のようにします。 <input type="text" value="test" /> $("input[type=text]").click(function() { $(this).select(); // would select "test" in this example }); Angularの方法を試してみましたが、見つけたほとんどの例は、モーダルプロパティの変更を監視するディレクティブを処理しています。フォーカスを受け取る入力を監視するディレクティブが必要だと思います。どうすればいいですか？
4
他のコントローラーからディレクティブコントローラーのメソッドを呼び出す
独自のコントローラーを持つディレクティブがあります。以下のコードを参照してください： var popdown = angular.module('xModules',[]); popdown.directive('popdown', function () { var PopdownController = function ($scope) { this.scope = $scope; } PopdownController.prototype = { show:function (message, type) { this.scope.message = message; this.scope.type = type; }, hide:function () { this.scope.message = ''; this.scope.type = ''; } } var linkFn = function (scope, lElement, …
4
Angular ng-change delay
変更時にng-repeatリストをフィルタリングする入力があります。リピートには多くのデータが含まれており、すべてをフィルタリングするには数秒かかります。フィルタリングプロセスを開始する前に、0.5秒の遅延が必要です。この遅延を作成する角度の正しい方法は何ですか？ 入力 <input ng-model="xyz" ng-change="FilterByName()" /> 繰り返す <div ng-repeat"foo in bar"> <p>{{foo.bar}}</p> </div> フィルター機能 $scope.FilterByName = function () { //Filtering Stuff Here }); ありがとう
5
Angularディレクティブの拡張
サードパーティのディレクティブ（特にAngular UI Bootstrap）に小さな変更を加えたいのですが。paneディレクティブのスコープに追加したいだけです。 angular.module('ui.bootstrap.tabs', []) .controller('TabsController', ['$scope', '$element', function($scope, $element) { // various methods }]) .directive('tabs', function() { return { // etc... }; }) .directive('pane', ['$parse', function($parse) { return { require: '^tabs', restrict: 'EA', transclude: true, scope:{ heading:'@', disabled:'@' // <- ADDED SCOPE PROPERTY HERE }, link: function(scope, element, attrs, …
3
jqLit​​eを使用してクラス名で要素を選択する方法
Angular.jsアプリを軽量化するためにjqueryを削除し、代わりにAngularのjqLit​​eを配置しようとしています。しかし、アプリはfind（ '＃id'）とfind（ '.classname'）を頻繁に使用しますが、これらはjqLit​​eでサポートされていません。 それを変える最善の方法は何だと思いますか。私が考えた1つのアプローチは、カスタムHTMLタグを作成することです。例：変更 <span class="btn btn-large" id="add-to-bag">Add to bag</span> に <a2b style="display:none;"><span class="btn btn-large" >Add to bag</span></a2b> そして $element.find('#add-to-bag') に $element.find('a2b') 何かご意見は？他のアイデア？ ありがとう Lior
7
angularjsディレクティブは、属性で指定された関数を呼び出し、それに引数を渡します
属性にリンクするディレクティブを作成したい。この属性は、スコープで呼び出す必要がある関数を指定します。しかし、リンク関数内で決定される関数に引数を渡したいとも思います。 <div my-method='theMethodToBeCalled'></div> リンク関数では、関数に渡す必要がある引数を渡すjQueryイベントにバインドします。 app.directive("myMethod",function($parse) { restrict:'A', link:function(scope,element,attrs) { var expressionHandler = $parse(attrs.myMethod); $(element).on('theEvent',function( e, rowid ) { id = // some function called to determine id based on rowid scope.$apply(function() {expressionHandler(id);}); } } } app.controller("myController",function($scope) { $scope.theMethodToBeCalled = function(id) { alert(id); }; } idを渡さなくても機能しますが、引数を渡そうとするとすぐに関数が呼び出されなくなります
5
AngularJS：モデル要素がモデル配列からスプライスされたときにng-repeatリストが更新されない
2つのコントローラーがあり、それらの間でapp.factory関数を使用してデータを共有しています。 最初のコントローラーは、リンクをクリックすると、モデル配列（pluginsDisplayed）にウィジェットを追加します。ウィジェットが配列にプッシュされ、この変更がビューに反映されます（ng-repeatを使用して配列の内容を表示します）。 <div ng-repeat="pluginD in pluginsDisplayed"> <div k2plugin pluginname="{{pluginD.name}}" pluginid="{{pluginD.id}}"></div> </div> ウィジェットは、k2plugin、remove、およびresizeの3つのディレクティブに基づいて構築されています。removeディレクティブは、k2pluginディレクティブのテンプレートにスパンを追加します。上記のスパンをクリックすると、共有配列への正しい要素がで削除されArray.splice()ます。共有配列は正しく更新されますが、変更はビューに反映されません。ただし、別の要素が追加されると、削除後にビューが正しく更新され、以前に削除された要素は表示されません。 何が問題になっていますか？これが機能しない理由を教えてください。AngularJSで私がしようとしていることを行うためのより良い方法はありますか？ これは私のindex.htmlです： <!doctype html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"> </script> <script src="main.js"></script> </head> <body> <div ng-app="livePlugins"> <div ng-controller="pluginlistctrl"> <span>Add one of {{pluginList.length}} plugins</span> <li ng-repeat="plugin in pluginList"> <span><a href="" ng-click="add()">{{plugin.name}}</a></span> </li> </div> <div ng-controller="k2ctrl"> <div ng-repeat="pluginD in pluginsDisplayed"> <div …
2
ディレクティブからコントローラーにAngularJSスコープ変数を渡す最も簡単な方法は？
ディレクティブからコントローラーにAngularJSスコープ変数を渡す最も簡単な方法は何ですか？私が見たすべての例は非常に複雑に見えますが、ディレクティブからコントローラーにアクセスして、スコープ変数の1つを設定する方法はありませんか？
2
ディレクティブテストにおける$ applyと$ digest
スコープの特定の属性のステータスに応答するディレクティブがあり、テストでその属性を変更して正しく応答することを確認したい場合、その変更を行うための最良の方法はどれですか。 私はこれらの両方のパターンを見てきました： scope.$apply(function() { scope.myAttribute = true; }); そして scope.myAttribute = true; scope.$digest(); それらの違いは何ですか？どちらが優れていますか？
6
角度ng-bind-htmlとその中のディレクティブ
プランカーリンク HTMLをバインドしたい要素があります。 <div ng-bind-html="details" upper></div> うまくいきます。これで、バインドされたhtmlにバインドされたディレクティブもあります。 $scope.details = 'Success! <a href="#/details/12" upper>details</a>' ただし、upperdivとanchorを含むディレクティブは評価されません。どうすれば機能しますか？
2
ディレクティブはAngularJSのng-repeatスコープでスコープを分離します
（他の場所でディレクティブを再利用できるように）分離スコープを持つディレクティブがありng-repeat、このディレクティブをで使用すると、機能しません。 このトピックに関するすべてのドキュメントとスタックオーバーフローの回答を読み、問題を理解しました。通常の問題をすべて回避できたと思います。 したがって、ng-repeatディレクティブによって作成されたスコープが原因でコードが失敗することを理解しています。私自身のディレクティブは、isolateスコープを作成し、親スコープ内のオブジェクトに双方向のデータバインディングを行います。私のディレクティブは、このバインドされた変数に新しいオブジェクト値を割り当てます。これは、私のディレクティブを使用しない場合ng-repeat（親変数が正しく更新される場合）に完全に機能します。ただし、ng-repeatでは、割り当てによってng-repeatスコープ内に新しい変数が作成され、親変数には変更が反映されません。これはすべて、私が読んだ内容に基づいて予想どおりです。 また、特定の要素に複数のディレクティブがある場合、1つのスコープのみが作成されることも読みました。そしてpriority、各ディレクティブにa を設定して、ディレクティブが適用される順序を定義できます。ディレクティブは優先度でソートされてから、それらのコンパイル関数が呼び出されます（http://docs.angularjs.org/guide/directiveで優先度という単語を検索してください）。 したがって、優先順位を使用してディレクティブが最初に実行され、最終的に分離スコープが作成されるようにし、ng-repeat実行時に親スコープからプロトタイプを継承するスコープを作成する代わりに分離スコープを再利用できることを望んでいました。ng-repeatドキュメントは、優先レベルでそのディレクティブの実行と述べています1000。1優先度が高いか低いかは不明です。1ディレクティブで優先度を使用しても違いはないので、試してみました2000。しかし、それは事態をさらに悪化させます。私の双方向のバインディングがなりundefined、私のディレクティブは何も表示しません。 私は自分の問題を示すためのフィドルを作成しました。priorityディレクティブの設定をコメントアウトしました。名前オブジェクトのリストと、名前オブジェクトのname-row姓名フィールドを表示するという名前のディレクティブがあります。表示された名前をクリックselectedすると、メインスコープに変数を設定して欲しい。名前の配列、selected変数はname-row双方向のデータバインディングを使用してディレクティブに渡されます。 メインスコープで関数を呼び出すことでこれを機能させる方法を知っています。また、selectedが別のオブジェクトの内部にあり、外部オブジェクトにバインドすると、問題が発生しないことも知っています。しかし、私は現時点ではそれらの解決策には興味がありません。 代わりに、私が持っている質問は次のとおりです。 どうやって防ぐか ng-repeat親スコープからプロトタイプ的に継承するスコープを作成せずに、ディレクティブの分離スコープを使用するにはですか？ なぜ優先レベルなのか 2000ディレクティブのしないのですか？ バタランを使用して、どのタイプのスコープが使用されているかを知ることは可能ですか？
4
AngularJSでスコープを分離せずにディレクティブからコントローラー関数を呼び出す
分離スコープを使用せずに、ディレクティブ内から親スコープの関数を呼び出す方法を見つけることができないようです。分離スコープを使用する場合、分離で "＆"を使用して親スコープの関数にアクセスできることを知っていますが、必要がないときに分離スコープを使用すると影響があります。次のHTMLについて考えてみます。 <button ng-hide="hideButton()" confirm="Are you sure?" confirm-action="doIt()">Do It</button> この簡単な例では、JavaScriptの確認ダイアログを表示し、確認ダイアログで[OK]をクリックした場合にのみdoIt（）を呼び出します。これは、分離されたスコープを使用して簡単です。ディレクティブは次のようになります。 .directive('confirm', function () { return { restrict: 'A', scope: { confirm: '@', confirmAction: '&' }, link: function (scope, element, attrs) { element.bind('click', function (e) { if (confirm(scope.confirm)) { scope.confirmAction(); } }); } }; }) しかし問題は、私が分離スコープを使用しているため、上の例のng-hideは親スコープに対して実行されず、分離スコープで実行されることです（ディレクティブで分離スコープを使用すると、その要素のすべてのディレクティブが分離スコープを使用します）。以下は、 ng-hideが機能しない上記の例のjsFiddleです。（このフィドルでは、入力ボックスに「yes」と入力すると、ボタンが非表示になることに注意してください。） 代わりに、分離されたスコープを使用しないこともできます。これは、このディレクティブのスコープを分離する必要がないため、実際にここで本当に必要なものです。私が持っている唯一の問題は、分離されたスコープに渡さない場合、親スコープのメソッドをどのように呼び出すのですか？ これは、孤立スコープを使用していないng-hideのjsfiddleですが、もちろん ng-hideは正常に動作していますが、confirmAction（）の呼び出しは機能せず、動作させる方法がわかりません。 注意してください、私が本当に探している答えは、分離されたスコープを使用せずに外部スコープの関数を呼び出す方法です。また、この確認のポイントは、外部スコープを呼び出す方法を理解し、それでも他のディレクティブを親スコープに対して機能させることができるためです。 …
2
AngularJSディレクティブから属性にアクセスする
私のAngularJSテンプレートには、次のようなカスタムHTML構文が含まれています。 <su-label tooltip="{{field.su_documentation}}">{{field.su_name}}</su-label> それを処理するディレクティブを作成しました： .directive('suLabel', function() { return { restrict: 'E', replace: true, transclude: true, scope: { title: '@tooltip' }, template: '<label><a href="#" rel="tooltip" title="{{title}}" data-placement="right" ng-transclude></a></label>', link: function(scope, element, attrs) { if (attrs.tooltip) { element.addClass('tooltip-title'); } }, } }) を実行するとGoogle ChromeのJavaScriptコンソールから属性が表示されても、attrs.tooltip常に返される式を除いて、すべてが正常に機能します。undefinedtooltipconsole.log(attrs) なにか提案を？ 更新：Artemによってソリューションが提供されました。それはこれを行うことにありました： link: function(scope, element, attrs) { attrs.$observe('tooltip', …
1
AngularJS：ngInclude vsディレクティブ
いつディレクティブを使用するのか、ngincludeを使用する方が適切なのはよくわかりません。この例を見てみましょう。私はpassword-and-confirm-input-fields.html、パスワードを入力して確認するためのhtml という部分を持っています。私は、signup-pageとchange-password-pageの両方でこれを使用しています。これらの2つのページにはそれぞれコントローラーがあり、部分的なhtmlには専用コントローラーがありません。 ディレクティブを使用する必要がありますngIncludeか？
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.