Question

尽管大量大量的在线示例，但我无法绕过正确的方式来使用ng-model作为我的自定义指令。

我想实现一个基本上是<select>标签的自定义指令，带有固定选项，选中后会在模型中设置布尔值。

简而言之，我希望能够像我这样使用我的指令：

<my-directve ng-model="amodel.options"></my-directive>

这应该呈现一个选择，当用户选择一个选项时，相应地更新amodel.options：

选项A：amodel.options.foo = true，amodel.options.bar = false
选项B：amodel.options.foo = false，amodel.options.bar = true
选项C：amodel.options.foo = true，amodel.options.bar = true

我将如何做到这一点？我到目前为止：

angular.module("myApp")
    .directive( "myDirective", function() {
    return {
        restrict: "E",
        replace: true,
        require: "ngModel",
        scope: {},
        template: '<select ng-model="internal">' + 
                    '<option value="0">Option A</option>' +
                    '<option value="1">Option B</option>' +
                    '<option value="2">Option C</option>' +
                  '</select>',
        link: function( scope, element, attr, ngModel ) {

            var mappings = [
                { foo: true, bar: false },
                { foo: false, bar: true },
                { foo: true, bar: true }
            ];

            scope.$watch( "internal", function( val ) {
                ngModel.$modelValue.foo = mappings[val].foo;
                ngModel.$modelValue.bar = mappings[val].bar;
            } );
        },
    };
} );

但所有这一切都是给我一个冗余使用ng-Model的错误。

我尝试过各种教程，但没有一个能为我工作......

我该如何正确地做到这一点？

提前致谢！

Answer 1

问题是您要将replace属性设置为true。这意味着两件事：

指令的HTML将替换为template HTML
旧元素中的所有属性/类都将迁移到新元素（包括ng-model）

最后一步导致“ng-Model被冗余使用”错误。

要修复此问题，您只需删除replace属性即可。另外，请注意replace属性为deprecated，因此越早停止使用它就越好。

<强> Demo

了解自定义指令和ngModelController

1 个答案: