コントローラーを介してディレクティブのスコープを取得していますか？

Question

次のような指示があるとします。
1）私のビューのコントローラでdata1とdata2の値にアクセスする方法はありますか？
2）それは例えば、iは物体の形でリターンmodelValueを持っていることは可能です：form.inputData.data1とform.inputData.data2

.directive('splitValue', function() { 
    return { 
     restrict: 'A', 
     require: '^ngModel', 
     scope: { 
      ngModel: '=' 
     }, 
     link: function(scope, element, attrs, ngModelCtrl) { 
      ngModelCtrl.$formatters.push(function (modelValue) { 
       if (modelValue.indexOf(',') !== -1) { 
        scope.data1 = modelValue.split(',')[0]; 
        scope.data2 = modelValue.split(',')[1]; 
       } 

       return modelValue; 
      }) 
     } 
    } 
}); 

<input type="text" ng-model="form.inputData" split-value> 

Answer 1

• デモ：http://so.devilmaycode.it/retrieving-scope-in-directive-via-controller/

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

    myModule.controller("myController", function($scope) { 

     $scope.elementToSplit1 = { 
     inputVal: 'comma,separeted', 
     data1: '', 
     data2: '', 
     }; 

     $scope.elementToSplit2 = { 
     inputVal: 'comma,separeted', 
     data1: '', 
     data2: '', 
     }; 

     // FOR TESTS to see if data is changing or not 
     $scope.$watchCollection("elementToSplit1", function(newValue, oldValue) { 
     console.log("elementToSplit1", $scope.elementToSplit1.data1, $scope.elementToSplit1.data2) 
     }); 

     // FOR TESTS to see if data is changing or not 
     $scope.$watchCollection("elementToSplit2", function(newValue, oldValue) { 
     console.log("elementToSplit2", $scope.elementToSplit2.data1, $scope.elementToSplit2.data2) 
     }); 

    }); 

    myModule.directive('splitValue', function() { 
     return { 
     template: function(element, attrs) { 
      var currentModel = attrs.ngModel; 
      var template = '<div class="input-group">' + '<span class="input-group-addon">{{' + currentModel + '.data1}}</span>' + '<span class="input-group-addon">{{' + currentModel + '.data2}}</span>' + '<input type="text" name="' + currentModel + '" class="form-control" ng-model="' + currentModel + '.inputVal">' + '</div>'; 
      return template; 
     }, 
     replace: true, 
     require: 'ngModel', 
     link: function(scope, element, attrs, ngModel) { 
      var currentModel = attrs.ngModel; 
      scope.$watchCollection(attrs.ngModel + '.inputVal', function(newValue, oldValue) { 
      if (newValue.indexOf(',') !== -1) { 
       var splitStr = newValue.split(','); 
       scope[currentModel].data1 = splitStr[0]; 
       scope[currentModel].data2 = splitStr[1]; 
      } else { 
       scope[currentModel].data1 = ''; 
       scope[currentModel].data2 = ''; 
      } 
      }); 
     } 
     } 
    }); 

---

<split-value ng-model="elementToSplit1"></split-value> 
    <br> 
<split-value ng-model="elementToSplit2"></split-value> 

---

解説（？）：

あなたの質問に迅速に答えはあなたのディレクティブは、それがscopeを所有しています定義されているため、それに戻って親$scope、これだdata1とdata2を設定する$parentを使用することです。だからscope.$parent.data1 = modelValue.split(',')[0];が動作します。

1つの要素を持っていればこのメソッドがうまくいくかもしれませんが、もっと多くの情報があるとすぐに、ハードコーディングされたdata1, data2などの指示がたくさんあります。指令を使用せずに同じ結果を達成するためにコントローラ内にシンプルな$watchを使用することができました。

代わりに、必要なときに1つのディレクティブを再使用するようにしてください。私のアプローチは新しいスコープを設定せず、既存のものを使用することです。メイン入力モデルに属するdata1とdata2は、それらをすべて保持するためのテンプレートを作成しています。

希望これは助けました。 ;-)