1

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

指示：

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>

控制器中的数据初始化：

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

我查看了这些以获得灵感，不幸的是他们没有解决我的问题 jquery-steps into a angularjs 指令 https://stackoverflow.com/questions/24891728/use-of-ngmodel-from-a-compiled-template 嵌套中的嵌入带有 jQ​​uery 步骤的元素

任何想法都非常感谢:)

4

0 回答 0