コントローラからの指令をトリガーするためのより良いアプローチ -- javascript フィールド と angularjs フィールド と angularjs-directive フィールド と triggers フィールド と controller フィールド 関連 問題

Better approach for triggering directive from controller












3
vote

問題

日本語

コントローラ内のサービス呼び出しの結果に基づいていくつかのDOM操作をする必要がある指令を持っています。以下は現在次のアプローチです。

1)各ディレクティブに対応する各コントローラスコープにトリガオブジェクトを作成します。必要なときにDOM操作を行う

2)ディレクティブを作成し、コントローラから設定された値に基づいてDOM操作を行います。

<事前> <コード> app.directive("myDirective", function () { return { restrict: 'A', link: function (scope, element, attrs) { attrs.$observe('myDirective', function (value) { if (value === "true") { $(element).text("Scrolled to####" + $(element).data("scroll")); } }); } }; });

3)それぞれのコントローラ方式から値を true に設定してディレクティブ機能をトリガーする

<事前> <コード> app.controller("controller1", ["$scope", function ($scope) { $scope.trigger1 = false; $scope.triggerDirective1 = function () { $scope.trigger1 = true; }; $scope.trigger2 = false; $scope.triggerDirective2 = function () { $scope.trigger2 = true; }; }]); <div id="c1" ng-controller="controller1">Controller 1 <br>List 1 <div my-directive="{{trigger1}}" data-scroll="20"></div>List 2 <div my-directive="{{trigger2}}" data-scroll="30"></div> <button ng-click="triggerDirective1()">Trigger Directive 1</button> <button ng-click="triggerDirective2()">Trigger Directive 2</button> </div>

完全なコードはこちら - http://jsfiddle.net/qec35dq4/

次の理由のため、このアプローチはそれほど良くないと思います:

1)指令が付いている

で複数の要素があるでしょう

2)各ディレクティブトリガは独立しています。任意のディレクティブのみがアクションであるであろう。ビューのディレクティブの数を描く、私はそれぞれのコントローラ内のすべてのトリガを追跡する必要があります。

この問題を解決するためのより良い方法は、このトリガースコープオブジェクトをコントローラー内の追跡することの依存関係を回避することができるのですか?.Iは<コード> $broadcast/$emit,$on を使用することを考えた。しかし、それが良い解決策になるとは思わないでください。あなたの考えを私に知らせてください。

あらゆる助けを受けてありがとう

編集:

新しいフィドル - http://jsfiddle.net/86pk8ltl/

例を簡単に変更しましょう - この指令が適用されるページに関する複数のリストがあります。バックエンドからのいくつかの論理には、いくつかの項目を選択する必要があります。リスト。項目が選択されると、最初の選択された項目がビューになるようにリストをスクロールする必要があります(例では、データ属性を使用してスクロール位置を使用している。実際の指令では、ScrollPositions.butが計算を行います)。このディレクティブの目的はただのものです。 「表示するスクロール」部分を処理するには、その部分がスコーププロパティを保持するのに多少懐疑的です。現在のアプローチがうまく機能していることに注意してください。これへのより良いアプローチがあるかどうかを見たいだけです。

英語

I have a directive which needs to do some DOM manipulation based on the result of a service call in the controller. Following is the approach I am currently following:

1) Create a trigger object in each controller scope corresponding to each directive in view - to do dom manipulation when needed

2) Create the directive and do the dom manipulation based on the value set from controller;

app.directive("myDirective", function () {     return {         restrict: 'A',         link: function (scope, element, attrs) {             attrs.$observe('myDirective', function (value) {                 if (value === "true") {                     $(element).text("Scrolled to####" + $(element).data("scroll"));                 }              });         }     }; }); 

3)From the respective controller method set the value to true to trigger directive functionality

app.controller("controller1", ["$scope", function ($scope) {     $scope.trigger1 = false;      $scope.triggerDirective1 = function () {          $scope.trigger1 = true;     };     $scope.trigger2 = false;      $scope.triggerDirective2 = function () {          $scope.trigger2 = true;     }; }]);  <div id="c1" ng-controller="controller1">Controller 1     <br>List 1     <div my-directive="{{trigger1}}" data-scroll="20"></div>List 2     <div my-directive="{{trigger2}}" data-scroll="30"></div>     <button ng-click="triggerDirective1()">Trigger Directive 1</button>     <button ng-click="triggerDirective2()">Trigger Directive 2</button> </div> 

Complete code is here - http://jsfiddle.net/qec35dq4/

I find this approach not so good because of the following reason:

1) There will be multiple elements in view with the directive attached

2) Each Directive trigger is independent.At any single time only one directive would be in action.Depending on the number of directives in view, I have to keep track of all the trigger in the respective controller.

Is there a better way to solve this problem, so that the dependency of keeping track of this trigger scope object in controller can be avoided?.I thought of using $broadcast/$emit,$on. But don't think that will be a good solution either .Please let me know your thoughts.

Thanks in advance for any help

EDIT:

New fiddle - http://jsfiddle.net/86pk8LtL/

Changed the example a bit to reflect more on what I am trying to achieve - There will be multiple lists on page to which this directive will be applied.Based on the some logic from back-end some items need to be selected in the list. Once items are selected, the list should be scrolled so that the first selected item is in view(In the example,i am hardcoding the scrollposition using data attributes.But in reality directive would do the calculation).The purpose of this directive is just to handle the "scroll to view" part which is why I am somewhat sceptical in keeping a scope property for it. Please note that the current approach is working fine. Just want to see if there is any better approach to this.

</div
              
         
         

回答リスト

1
 
vote

angularjsは、イベント駆動型ライブライブライブラリのようなDOM照会の使用については実際にはありません。 コントローラフェッチを使用することをお勧めします。 AngularがOOP規格をサポートしているのでコントローラのネストを試みて、子コントローラの範囲は親コントローラから継承されます。それはあなたがどの要素の状態をトリガーされた状態を観察することができます。この基本的な例を見てみましょう http://jsfiddle.net/qec35dq4/3/ また、モデルをディレクティブのスコープに渡すために属性を守るのではなく、お勧めします。それはあなたが属性の変更の観察を回避するのを助けるでしょう。

最後ではなく、要素の属性の変更を見る必要はありません。 attrs

を介して入手できます。 <事前> <コード> app.directive("myDirective", function () { return { restrict: 'A', link: function (scope, element, attrs) { attrs.$observe('myDirective', function (value) { if (value === "true") { $("#result").text(attrs.msg); } }); } }; });

編集 これはあなたの最新のJSfiddleに基づいて demo です。

 

AngularJS is not really about using DOM querying like event driven libraries do. I would suggest using controller fetching. Since Angular supports OOP standards try nesting your controllers, the scope of the child controllers is inherited from the parent controllers, that means you could observe the state of the which element is triggered. Take a look at this basic example http://jsfiddle.net/qec35dq4/3/ Also , I would suggest instead of observing attributes to pass a model into the directive's scope. That will help you to avoid observing for attribute changing.

Least but not last, you don't really need to watch for element's attribute change. It is available through the attrs of your directive:

app.directive("myDirective", function () {     return {         restrict: 'A',         link: function (scope, element, attrs) {             attrs.$observe('myDirective', function (value) {                 if (value === "true") {                     $("#result").text(attrs.msg);                 }              });         }     }; }); 

EDIT Here is a demo based on your latest JSFiddle.

</div
 
 
0
 
vote

私はこの先週のようなことをしなければなりませんでした。 Cross Element Directive DOM操作は、複数の指令を書いたくないが、私がそれをしたときに私がIDで欲しい要素を調べました。これにより、スコープ上のメソッドを定義しなければなりません。

<事前> <コード> dt, dd {display: block; position: absolute;} 0

と指令。

<事前> <コード> dt, dd {display: block; position: absolute;} 1
 

I had to do something like this last week. Cross element directive dom manipulation can be tricky assuming you don't want to write more than one directive, but when I did it I looked up elements I wanted by ID. This will save you from having to define methods on the scope.

<div id="trigger1"></div>List 2 <div id="trigger2"></div> <button my-directive="trigger1" data-scroll="20">Trigger Directive 1</button> <button my-directive="trigger2"  data-scroll="30">Trigger Directive 2</button> 

And the directive.

app.directive("myDirective", function () {     return {         restrict: 'A',         link: function (scope, element, attrs) {                 var idElem = document.getElementById(attrs.myDirective);                 var elementToChange = angular.element(idElem);                 element.on("click", function(){                     elementToChange.text("Scrolled to####" + attrs.dataScroll);                 });             });         }     }; }); 
</div
 
 
0
 
vote

このディレクティブを見てください。 https://github.com/iameugenejo/ngscrollto それはあなたが望むものを達成するための非常にきれいな方法のようです。

 

Have a look at this directive: https://github.com/iameugenejo/ngScrollTo It seems a very neat way to achieve what you want.

</div
 
 
0
 
vote

私は2つのことを言及したいのですが

  1. AngularJSはDOM操作についてではありません。

  2. 指令の作業概念、それは純粋にコントローラとすべてが独立している必要があります。

  3. 私のビューでは、ディレクティブトリガーはデータに基づいている必要があります。

    したがって、データ

    に従ってトリガーされた場合、単一のビューで複数の指令を使用するのに問題はありません。
 

I would like to mention two things

  1. AngularJs is not about DOM Manipulation.

  2. working concept of directive ,it must be purely independent from the controller and all, must be working in all place.

In my view the directive triggering must be on the basis of data.

So there won't be a problem in using multiple directive in a single view if they are triggered according to data

</div
 
 

関連する質問

10  Rails:戻るボタンを押してもう一度保存するため、重複したインサートを防ぐ  ( Rails prevent duplicate inserts due to pressing back button and save again ) 
「保存」ボタンを使用してデータベースにレコードを追加するためのフォームを含む「新しい」アクションを持つ単純なRails Scaffoldアプリケーションについて考えてください。 「作成」アクションの後、コントローラは「Show」アクションにリダイレクトします。...

0  Cocoa - コントローラからビューメソッドを呼び出します  ( Cocoa calling a view method from the controller ) 
は私が前にそれについて尋ねたほとんど問題を得ましたが、私は正しく尋ねていなかったかもしれません。 私は、とりわけ以下の作業を行わなければならないCocoaアプリケーションがあります。 - ディスクから画像をロードし、それらを配列に保存し、それらをカスタムビュ...

6  CakePHPでアプリケーションロジックを共有する正しい場所は何ですか?  ( Whats the correct place to share application logic in cakephp ) 
私は質問に対する簡単な答えを推測するでしょう成分。 同意しますが、私はとても具体的なもののためにコンポーネントを書く必要があります。 たとえば、ユーザーのテーブルがあるとしましょう。ユーザーが作成されると、イベントのチェーン反応を形成し、データベースの周囲のユ...

3  ASP.NET MVCコントローラがテスト時に正しく初期化されます  ( Asp net mvc controllers properly initialized when testing ) 
統合テスト用にASP.NET MVCコントローラを正しく初期化する方法は? 私の現在の問題は、コントローラのユーザーメンバーにアクセスしようとすると、 System.NotImplementEdception:メソッドまたは操作は実装されていません。 私...

2  レールの複雑な形式(has_and_belongs_to_many)  ( Complex forms in rails has and belongs to many ) 
今、私は実際にプロジェクト管理アプリケーションを構築するための途中で、私はこのフォームを構築する方法で頑張っています。プロジェクトを追加する瞬間に、プロジェクトに含まれるクライアントを選択したいと思います。これは興味のあるもののようなコードです: プロジェクト...

0  LoadRunner Webプロトコルスクリプトの再生中にブラウザエージェントが変更された場合はどうなりますか?  ( What happens if browser agent is changed while replaying loadrunner web protocol ) 
LRスクリプトを実行すると、LR 11のブラウザエージェント(IE8)を使用した通常のWeb HTTP / HTMLプロトコルで構成されているとしましょう.11。スクリプトは同じLRバージョンを使用して作成されましたが、IE11を使用して作成されました。ブラ...

4  私はあらゆる行動のためのビューが必要ですか?  ( Do i need a view for every action ) 
私は短い間ASP.NET MVCで開発されています。この時点まで、コントローラの動作はかなり単純でした。各アクションは対応するビューを返します。ただし、私は最近、私が必ずしもページを必要としないアクションを作成しました(アクションの目的はデータベースを操作する...

1  レール内の複数のチェックレコードを削除する方法  ( How to delete multiple checked records in rails ) 
各行のチェックボックスを表示する方法を考え出した。 問題は、refor_tagパラメータをdeteleアクションを使用してmessages_controllerに渡すために、form_tagとsubmit tagを送信する方法がわかりません。 そして削除操作で...

1  組み込みのズームコントロールのようにAndroidズーム制御の自動消失  ( How to make android zoom control auto disappear like the built in zoom controls ) 
ズーム制御装置の位置を変更しなければなりませんでした。この目的のために、私はAndroidズームコントロールを使用し、リスナーに機能をズームインしてズームアウトしました。しかし、今、私は彼らが組み込まれたズームコントロールと同じ方法で行動することを考えていまし...

0  送信時に成功した後にカスタムアクションと正しくリダイレ​​クトします  ( Custom actions and redirecting properly after success on submit ) 
私は実際には小さなアプリに取り組んでいて、ユーザーはイベントを作成できます。それは3つのステップで行わなければなりません。 これを実現するには、関連コントローラに2つのカスタムアクションを作成しました。各ビューには、 update URLを使用してフォームが...




© 2022 cndgn.com All Rights Reserved. Q&Aハウス 全著作権所有