I'm creating a directive wrapper for jQuery Steps (https://github.com/rstaib/jquery-steps). Inside the directive i want to be to databind with ngModel on each of the steps in the wizard that it creates. The databinding however is not working, it seems as if the binding to parent ngModel is lost somewhere in the link()/compile() of the directive.
directive:
this.app.directive('wizard', ['$compile', function ($compile) {
return {
restrict: 'E',
template: '<div class="wizard" data-ng-transclude></div>',
replace: true,
transclude: true,
scope: {
showTabs: '=',
enableAllSteps: '=',
startIndex: '=',
cancel: '&',
finish: '&',
stepChanged: '&'
},
link: function ($scope, element, attrs) {
element.wrapInner('<div class="steps-wrapper">');
var opts = {
headerTag: "h3",
bodyTag: "div",
transitionEffect: "slideLeft",
autoFocus: true
};
var stepsEl = element.children('.steps-wrapper').steps(opts);
$compile(stepsEl)($scope);
}
};}]);
markup:
<h1>{{data.step1data}}</h1> <!-- outputs correct data bound by controller ("this is step 1") -->
<wizard>
<h3>First step</h3>
<div>
<h1>{{data.step1data}}</h1> <!-- on load it is empty, but updated correctly when <input /> below is being used -->
<p>bla bla bla?</p>
<input style="width: 40%; height: 40%;" data-ng-model="data.step1data" />
</div>
<h3>Second step</h3>
<div>
<p>bla bla bla?</p>
<input style="width: 40%; height: 40%;" data-ng-model="data.step2data"/>
</div>
</wizard>
data init in controller:
$scope.data.step1data = "this is step 1";
$scope.data.step2data = "this is step 2";
I looked at these for inspiration, unfortunately they didn't solve my issue jquery-steps into a angularjs directive https://stackoverflow.com/questions/24891728/use-of-ngmodel-from-a-compiled-template Transclusion within nested element with jQuery Steps
Any idease are much appreciated :)