AngularJS：ディレクティブをラップして属性を渡す

Question

サードパーティのディレクティブhtmlをAngular 1.5で拡張またはラップする方法を探しています。

オリジナルと同じように使用されることを想定している

<div> 
    <my-directive></my-directive> 
    <lib-input ng-if="vodoo()"></lib-input> 
</div> 

：私は、次のHTMLをレンダリングするディレクティブ<my-lib-input>を作成したいディレクティブ

<lib-input></lib-input> 

を考えると

---

指令。

---

例

オリジナルと同じように、私のディレクティブを使用するには、私は私のテンプレートの特定のノードにすべての属性を移動する必要があります。

<my-lib-input ng-model="model" ng-change="ctrl.onChange()"></my-lib-input> 

は生成する必要があります：

<div> 
    <my-directive></my-directive> 
    <lib-input ng-if="vodoo()" ng-model="model" ng-change="ctrl.onChange()"></lib-input> 
</div> 

ただし、角度はすべてのデフォルトではルートノード（ここではdiv）に属性を追加します。

質問

は、どのように私は、テンプレートの特定のノードに私のディレクティブに渡されるすべてのパラメータ/属性を適用しますか？

---

私は次のように私のディレクティブで使用可能なパラメータのリストをハードコーディング予防したいと思います：

restrict: 'E', 
scope : { 
    ngModel: '=', 
    ngChange: '&', 
    ...  
} 

Answer 1

あなたは ワーキングJSFiddle here

var myApp = angular.module('myApp',[]); 
myApp.controller('myCtrl', function($scope) { 
    $scope.input = 'LibInput'; 
    $scope.changeInput2 = function(i2) { 
    $scope.myInputs.setInput2(i2); 
    } 

    //this is releaving module which have getters and setter and variables can be hidden from outside scope. 
    var getInputData = function() { 
    var input1 = 'Input1'; 
    var input2 = 'Input2'; 
    return { 
     getInput1 : function() { 
     return input1; 
     }, 
     getInput2 : function() { 
     return input2; 
     }, 
     setInput1 : function(i1) { 
     input1 = i1; 
     }, 
     setInput2 : function(i2) { 
     input2 = i2; 
     } 
    } 
    } 

    $scope.myInputs = getInputData(); 
}); 
myApp.directive('libInput', function() { 
    return { 
    restrict : 'E', 
    scope : { 
     input : '=' 
    }, 
    template : '<div>{{input}}</div>' 
    } 

}); 

myApp.directive('myLibInput', function() { 
    return { 
    restrict : 'E', 
    scope : { 
     input : '=', 
     myDirInput : '=' 
    }, 
    template : '<my-dir other-input="myDirInput"></my-dir>\ 
          <lib-input input="input"><lib-input>' 
    } 

}); 

myApp.directive('myDir', function() { 
    return { 
    restrict : 'E', 
    scope : { 
     otherInput : '=' 
    }, 
    template : '<div>{{otherInput.getInput1()}}</div>\ 
          <div>{{otherInput.getInput2()}}</div>' 
    } 
});