0

カスタム ディレクティブの Isolate Scope を試しています。

多くの開発者に確認した難しい質問ですが、これまでのところ回答が得られていません。

Link の JS Fiddle からコードを見つけて、これを機能させるために必要な変更を修正するのを手伝ってください。

ディレクティブ テンプレート内にMy Reverseという名前のボタンがあります。「ボタンのクリック時に、親の値に影響を与えずにディレクティブ テンプレート内にあるテキスト値を変更したい **」

提供された Fiddle コードの修正を楽しみにしています。JS FIDDLE でのこのコード サンプルの修正依頼

より具体的な説明:

親ボタンをクリックすると、ディレクティブのテキストボックスの値に影響を与えたいのですが、ディレクティブのボタンをクリックすると、親のテキストボックスの値ではなく、ディレクティブのテキストボックスの値のみに影響を与えたいです。

    app.directive("myDirective", function() {

  return {
    restrict: "EA",
    scope: {
      name: "@",
      color: "=",
      reverse: "&"
    },
    template: [
      "<div class='line'>",
      "Name : <strong>{{name}}</strong>;  Change name:<input type='text' ng-model='name' /><br/>",
      "<br/>When I click 'My Reverse' Button, name given inside 'Directive scope' alone must perform reverse operation & not Name inside Parent scope : <input type='button' ng-click='myReverse()' value='My Reverse'/>",
      "</div><div class='line'>",
      "Color : <strong style='color:{{color}}'>{{color|uppercase}}</strong>;  Change color:<input type='text' ng-model='color' /><br/></div>",
      "<br/><input type='button' ng-click='reverse()' value='Reverse Name'/>"
    ].join("")
  };

解決策を待っています..誰か助けてください..本当に感謝します

4

2 に答える 2

1

親コントローラーに影響を与えずに、「名前の反転」ボタンを押して親コントローラーからディレクティブに値を渡し、「マイリバース」ボタンを押して「名前の反転」を行うことができるように、コードを修正しました。

リンク関数パラメーターを追加し、その中に「My Reverse」ボタンをクリックすると呼び出される myReverseD() 関数を作成しました。

したがって、ディレクティブには次のものがあります。

app.directive("myDirective", function() {

  return {
    restrict: "EA",
    scope: {
      name: "@",
      color: "@",
      reverse: "&"
    },
    template: [
      "<div class='line'>",
      "Name : <strong>{{name}}</strong>;  Change name:<input type='text' ng-model='name' id='nametxt'/><br/>",
      "<br/>On button click 'My Reverse', I want to reverse text value which is there inside  directive template of isolate scope without affecting the above defined parent Name in Parent scope : <input type='button' ng-click='myReverseD($event)' value='My Reverse'/>",
      "</div><div class='line'>",
      "Color : <strong style='color:{{color}}'>{{color|uppercase}}</strong>;  Change color:<input type='text' ng-model='color' /><br/></div>",
      "<br/><input type='button' ng-click='reverse()' value='Reverse Name'/>"
    ].join(""),
     link: function (scope, element, attrs) {
               console.log(scope.name,scope.color);

               scope.myReverseD = function($ev){

                    var nametxt = document.getElementById('nametxt');
                    console.log($ev);
                    console.log('reverse',nametxt,nametxt.value);

                   nametxt.value = nametxt.value.split("").reverse().join("");       
               }
            }
  };

JSFIDDLE: http://jsfiddle.net/own7kbru/7/

希望は役に立ちます、頑張ってください。

于 2016-04-07T08:46:04.510 に答える