0

私はangularjsを使用してWebアプリを実装しています（私にとっては初めて）。ユーザーに提供したい機能の1つは、ユーザーがメニューの画像をクリックしたときにメインウィンドウにdivを作成することです。

そのために、以下のようなディレクティブを作成しました。

var platform = angular.module('platform', []);

platform.directive('addElement', function() {

  return function (scope,element, attrs){
        var createElement;

        createElement = function(){
            $('<div>Test</div>').appendTo('#body-main-window');
        };


        $(this).on('click',createElement);
    } 
});

そしてここに次のhtmlコードがあります：

<img class = "imgMenu" src="styles/img/logo_add.png" add-element />

問題は、要素でトリガーされたonClickイベントが、そのすべての祖先に伝播されているように見えることです。実際、クリックすると、divが作成されます。ユーザーがディレクティブがある画像をクリックしたときにのみdivが作成されるため、これは期待される動作ではありません。

さらに、クリックすると、directive属性を持つ画像の数だけディレクティブが実行されます。

これが私の問題を説明するためのフィドルです：http：//jsfiddle.net/6Ku7D/10/

1つの解決策は、ng-clickディレクティブを使用することですが、コントローラーでDOMの変更を行うことを意味します（これは、私の目標を達成するための適切な方法ではありません）。したがって、ディレクティブは解決策ですが、私は行き詰まっています。

よろしくお願いします

編集（追加情報）

実は、それは私がやりたいことのほんの一部です。一言で言えば、私がクリックしたい要素は私のアプリのメニューにあります。これらの要素は、単にいくつかのオブジェクトの名前です。それらをクリックして、名前だけでなく、編集可能なこのオブジェクトに関するその他の情報を含むdivを作成したいと思います。さらに、作成するdivは（jquery-uiを使用して）ドラッグ可能である必要があり、最後に、これらのdivを「リンク」してワークフローを作成できる必要があります。実は私がやりたいのはヤフーパイプによく似たものです（マッシュアップ/ワークフローエディションのユーザーフレンドリーなインターフェイスを提供します）が、コンピューターサイエンス（データマイニング）の研究者専用です。オブジェクトは、私が開発したWebサービスを介して最初にインポートされたアルゴリズム、データセット、または視覚化手法になります。したがって、「既存の配列に値を追加する」ほど単純ではありません。あなたはまだ私がng-clickを使うべきだと思いますか？

4

2 に答える 2

3

これはJqueryイベントの問題です...

イベントがバブリングしないように stopPropagation() を使用してみてください。

platform.directive('addElement', function() {

  return function (scope,element, attrs){
        var createElement;

        createElement = function(e){
            $('<div>Test</div>').appendTo('#body-main-window');
           e.stopPropagation();
        };


        $(this).on('click',createElement);
    } 
});

編集

私はあなたがやろうとしていることを理解しています.これはあなたがやろうとしていることを実行する実用的なPlunkです.

Angular で値のリストに新しい値を追加したい場合は、難しい方法で行っていると思います。それからまた、あなたの最終目標が何であるかわかりません...代わりにこれを試してください：

これが私の提案する解決策のプランクです

<body ng-controller="MainCtrl"> 
    <div id="menu">
        <div ng-repeat="item in listTest" class="toAddIcon" ng-click="addResult()">
            {{item}}, click here to add a div to results
        </div>                          
    </div>

    <hr/>
    <div id="displayResult"> 
        <header> -- Results -- </header>   
        <div ng-repeat="result in results">{{result}}</div>
    </div>
</body>

JS:

app.controller('MainCtrl', function($scope) {
  $scope.listTest = ['Peter','Bob','Susan'];   
  $scope.results = [];

  $scope.addResult = function(){
    $scope.results.push('TEST');
  };
});
于 2012-10-24T13:17:21.303 に答える
0

私はng-clickを使用します。これがコントローラーによるDOM操作を行うことを意味する理由がわかりません：

var platform = angular.module('platform', []);

platform.directive('addElement', function() {

  return function (scope,element, attrs){

        scope.createElement = function(){
            $('<div>Test</div>').appendTo('#body-main-window');
        };

    } 
});

HTML コード:

<img class="imgMenu" src="styles/img/logo_add.png" add-element ng-click="createElement()" />
于 2012-10-24T15:06:58.507 に答える