Question

我正在为jQuery Steps（https://github.com/rstaib/jquery-steps）创建一个指令包装器。在指令中，我希望在它创建的向导中的每个步骤上使用ngModel进行数据绑定。然而，数据绑定不起作用，似乎在指令的link（）/ compile（）中某处绑定到父ngModel。

指令：

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);
    }
};}]);

标记：

<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>

控制器中的数据init：

$scope.data.step1data = "this is step 1";
$scope.data.step2data = "this is step 2";

我看了这些灵感，不幸的是他们没有解决我的问题 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

非常感谢任何想法：）

在自定义指令内部使用ngModel进行编译

0 个答案: