Question

是的，我可能在这里遗漏了一些相当明显的东西，但现在就去了。我有一些来自bootstrap的HTML，我想重用它，所以我想把它变成一个自定义指令。

<label class="toggle">
<input ng-model='model' type="checkbox" class="toggleInput">
    <div class="track">
        <div ng-show="test" class="toggle-label on">
            {{onText}}
        </div>
        <div ng-show="!test" class="toggle-label off">
            {{offText}}
        </div>
    <div class="handle"></div>
</div></label>

html片段我想在我的网页中使用Angular将重新编译到上面的内容：

<toggle on-text="On" off-text="Off" ng-model="myModelName"></toggle>

我的指示如下：

.directive('toggle', function() {
    return {
        restrict: 'AE',
        templateUrl: 'views/toggle.view.html',
        replace: true,
        scope: {
            onText: '@',
            offText: '@',
            ngModel : '=',
        },
    };
});

但是，在查看html标记时，ng-model属性尚未更改为“myModelName”＆＃39;并且仍然只显示＆＃39;模态＆＃39;所以没有更新。

我做错了什么？

全部谢谢

Answer 1

尝试替换

<input ng-model='model' type="checkbox" class="toggleInput">

与

<input ng-model='{{ngModel}}' type="checkbox" class="toggleInput">

因为您希望将传入模型名称的值绑定到指令内模板的ng-model属性中。

Answer 2

想出来....在链接函数中使用compile来动态地将模型添加到我需要的元素中：

return $compile($('input.toggleInput',element).attr('ng-model', model))(scope);

将值传递给自定义指令中的ng-model

2 个答案: