カスタム動作のための＆fromディレクティブでparent関数を使用しますが、コールバックが必要ですか？

私は、単純なテキストエリア、または鉛筆アイコンがクリックされるまで編集不可能なdivにするオプションを許可しています。その時点で、テキストエリアが表示され、コンテンツが編集する。保存機能は、親コントローラによって定義される必要があります。カスタム動作のための＆fromディレクティブでparent関数を使用しますが、コールバックが必要ですか？

次のようにディレクティブの私の呼び出しは次のとおりです。

<body ng-controller="AppController"> 
    <my-dir togglesave=true contents="one" savecontents="savecontents(one)"></my-dir> 
    <my-dir togglesave=true contents="two" savecontents="savecontents(two)"></my-dir> 
    <my-dir contents="three" savecontents="savecontents(three)"></my-dir> 
</body>

はここにJSだ：

var app = angular.module('my-app', [], function() { 

    }) 

    app.controller('AppController', function($scope) { 

     $scope.one = "one"; 
    $scope.two = "two"; 
    $scope.three = "three"; 

    $scope.savecontents = function(obj){ 
    alert(obj); 
    } 

}) 

app.directive('myDir', function() { 
    return { 
    required: '^ngModel', 
    restrict: 'E', 
    scope: { 
     contents: '=', 
     togglesave: '=', 
     savecontents: '&' 
    }, 
    templateUrl: 'template.html', 
    link: function(scope, element, attrs) { 

     scope.pencil = false; 

    } 
    }; 
})`

は、ここにテンプレートです：

<div ng-show="editing || !togglesave"> 
    <textarea ng-model="contents"></textarea> 
</div> 
<div ng-mouseenter="pencil = true" ng-mouseleave="pencil= false" ng-show="!editing && togglesave">{{contents}} 
<button ng-show="pencil" ng-click="editing = true"><i class="fa fa-pencil"></i></button> 
</div> 
<span ng-show="editing"><button ng-click="savecontents()">save</button></span>

私はで定義されたsavecontents機能のために必要親は何とかディレクティブに保存が完了したことを知らせて、 "編集"フラグca nをfalseに設定し、テキストエリアと保存ボタンを非表示にし、編集不可能なdiv表示にします。私は角度が比較的新しいので、これについて正しいことをしているかどうかはわかりません。

任意援助理解:)

Here's a Plnkr

1および2このトグル動作を有するものとして定義されます。 3つはテキストエリアです。

ボーナスの質問は、誰がそれを呼んでいるのかによって複雑なオブジェクトになる可能性があるということです。私は指示が特定のパラメータかもしれないので、ディレクティブがオブジェクト全体について知りたいと思います。保存関数はオブジェクト全体について知る必要があるかもしれません。それを行う簡単な方法はありますか？ like - コンテンツがプリミティブであれば、それを表示するだけですが、オブジェクトの場合は、保存する関数が完全なオブジェクトに関する情報を持つことを許可しながら、どのパラメータを表示するべきか指示します。

出典

2016-10-16 subrama6

1）トグル動作を表示しない3番目の要素は、3番目の要素に対してtrueとトグルセーブ属性を渡していないためです。

<my-dir togglesave=true contents="one" savecontents="savecontents(one)"></my-dir> 
    <my-dir togglesave=true contents="two" savecontents="savecontents(two)"></my-dir> 
    <my-dir contents="three" savecontents="savecontents(three)"></my-dir>

それは、テキスト領域を示す代わりの動作をトグルしているので、だから、tooglesave属性がtemplate.htmlにディレクティブのスコープ内で未定義行くと！真=未定義されます。

2）template.htmlファイルは、 'my-dir'ディレクティブのスコープにバインドされています。ディレクティブのスコープ内のcontents属性の親コントローラから渡しているオブジェクトにすでにアクセスしているため、ディレクティブの属性としてsavecontents関数を作成してから親コントローラから渡す必要はありません。

あなたがしなければならないことは、編集ボタンをfalseにしてオブジェクトで何をしたいのかを指定するために、保存ボタンをクリックすると、指示文に関数を書くだけです。あなたのapp.jsとindex.htmlは変更されますこのような何かを：

var app = angular.module('my-app', [], function() { 

    }) 
    app.controller('AppController', function($scope) { 

     $scope.one = "one"; 
     $scope.two = "two"; 
     $scope.three = "three"; 

// Passing this function to the directive savecontents attributed so that this function can be executed by the directive. 
    $scope.savecontents1 = function(obj){ 
     //saving data for obj 1 
     alert(obj); 
     } 

     $scope.savecontents2 = function(obj){ 
     //saving data for obj 1 
     alert(obj); 
     } 

     $scope.savecontents3 = function(obj) { 
     //saving data for obj 1 
     alert(obj); 
     }; 

    }) 

    app.directive('myDir', function() { 
     return { 
     required: '^ngModel', 
     restrict: 'E', 
     scope: { 
      contents: '=', 
      togglesave: '=' 
     }, 
     templateUrl: 'template.html', 
     link: function(scope, element, attrs) { 


    // Calling the savedata method from the directive's template (template.html) on click of save button 
    scope.savedata = function() { 
     // It will execute the function passed from the parent controller. 
      scope.savecontents(); 
      scope.editing = false; 
    } 

     } 
     }; 
    })

そして、あなたのindex.htmlを

<my-dir togglesave=true contents="one" savecontents="savecontents1(one)"></my-dir> 
    <my-dir togglesave=true contents="two" savecontents="savecontents2(two)"></my-dir> 
    <my-dir togglesave=true contents="three" savecontents="savecontents3(three)"></my-dir>

私はこのことができます願っています。

出典

2016-10-16 16:33:38 JNC

お返事ありがとうございます:) 親が保存を実行しようとしている理由は、指示文にオブジェクトのプロパティを表示することがあるためです。一部の消費者は文字列を渡すことがあります。いくつかは複雑なオブジェクトを渡すかもしれません。それらの節約のステップは異なるでしょう。それは理にかなっていますか？オブジェクト型を汎用的にすることができない場合は、オブジェクト型ごとに異なるディレクティブを持つことが理にかなっているので、あなたが示唆しているように、ディレクティブにsave関数を定義できますか？ – subrama6

こんにちは、オブジェクトタイプごとに異なるディレクティブを作成する必要はありません。私はsavecontents属性を介して親コントローラからディレクティブのスコープにsave関数（savecontents1、savecontents2）定義を渡しています。そして、保存ボタンをクリックするとディレクティブスコープ内の関数を実行します。私は投稿を編集しました。これはあなたのユースケースをカバーするはずです。見てください。 – JNC

カスタム動作のための＆fromディレクティブでparent関数を使用しますが、コールバックが必要ですか？

答えて

関連する問題