Angularjs 具有双向值绑定和typeahead的指令

我想创建一个带有输入字段的指令，输入字段为bootstrap typeahead。 像这样：

<my-input value="myCar" value-expr="car as car.name for car in cars"></my-input>

---

我的问题是：如果我选择了一辆带有typeahead的汽车，指令作用域的myCar值会改变，但父作用域的myCar值不会改变。我希望你能理解我的问题。

我想这样的事情对你会有用的：

return {
    restrict : 'E',
    scope : {
        ngModel : '=',
        cars : '='
    },
    template : '<input ng-model="ngModel" typeahead="car as car.name for car in cars">',
    replace : true
};

返回{
限制：'E'，
范围：{
ngModel:“=”，
汽车：'='
},
模板：“”，
替换：正确
};

那么您的HTML将如下所示：

<input type="text" ng-model="myCar" typeahead="car as car.name for car in cars"/>

<my-input ng-model="myCar" cars="cars"></my-input>

return {
    restict : 'E',
    template : '<input type="text" typeahead="car as car.name for car in cars">',
    replace : true
};

这将在指令和父控制器的范围变量之间创建一个双向绑定，但cars可能不需要双向绑定

编辑

即使是更简单的解决方案，您也可以将范围完全排除在外，如下所示：

<input type="text" ng-model="myCar" typeahead="car as car.name for car in cars"/>

<my-input ng-model="myCar" cars="cars"></my-input>

return {
    restict : 'E',
    template : '<input type="text" typeahead="car as car.name for car in cars">',
    replace : true
};

返回{
restict:'E'，
模板：“”，
替换：正确
};

然后是HTML

<my-input ng-model="myCar"></my-input>

ngModel属性将自动将其作为属性添加到模板中，并保留与父控制器的绑定

编辑-更改typeahead的表达式

.directive('myInput', function($compile){
    return {
        restrict : 'E',
        template : '<input type="text">'
        replace : true,
        link : function($scope,el){
            var model = el.attr('ng-model');
            var ta = el.attr('value-expr');
            return $compile($('input',el).attr('ng-model',model).attr('typeahead',ta))($scope);
        }
    };
 }) // end directive

指令（'myInput'，函数（$compile）{ 返回{ 限制：'E'， 模板：“” 替换：正确， 链接：功能（$scope，el）{ var模型=el.attr（“ng模型”）； var ta=el.attr（'value-expr'）； 返回$compile（$（'input'，el）.attr（'ng-model'，model）.attr（'typeahead'，ta））（$scope）； } }; })//结束指令 HTML:

编辑-更新父范围但维护指令范围

return {
    restrict : 'E',
    replace : true,
    template : '<input type="text" ng-model="value" typeahead="{{valueExpr}} | filter:$viewValue" typeahead-on-select="onSelect($item,$model,$label)" class="form-control">',
    scope : {
        value : '=',
        collection : '=',
        valueExpr : '@'
    },
    link : {
        pre :  function(scope,el){
            /*var ta = el.attr('value-expr');
            return $compile($('input',el).attr('ng-model',scope.ngModel).attr('typeahead',ta))(scope);*/
            //$compile($('input',el));
        },
        post : function(scope,el,attrs){
            scope.changed = false;
        }
    }
};

返回{
限制：'E'，
替换：正确，
模板：“”，
范围：{
值：'='，
集合：“=”，
valueExpr:“@”
},
链接：{
前置：功能（范围，el）{
/*var ta=el.attr（'value-expr'）；
返回$compile（$（'input'，el）.attr（'ng-model'，scope.ngModel）.attr（'typeahead'，ta））（scope）*/
//$compile（$（'input'，el））；
},
职位：职能（范围、el、属性）{
scope.changed=false；
}
}
};

---

这里有一个有用的工具：

也许使用Angular UI Bootstrap的typahead会有所帮助：@m.e.conroy我正在使用Angular UI Bootstrap的typahead我可以问一下这个指令的附加值是什么吗，看起来你只是在交换属性名，并在创建独立作用域的过程中。设置

作用域：true

会创建一个新的子作用域，您基本上已经在一个方向上解除了指令范围与父控制器范围的链接。如果父项的值发生了变化，它将反映在指令中，但如果指令中的值发生了变化，它将无法到达父项。是的，它看起来像，但它只是整个指令的一部分。该指令将值（myCar）显示为文本，然后单击输入字段，并显示typeahead。是的，这就是我的问题。我需要一个myCar值的双向绑定。是的，这对我的示例有效，但我不想失去typeahead表达式的灵活性。我想重复使用我对其他类型头的指令，如…=“car.brand as car.name for car in cars”啊，好的，我现在明白了。谢谢你的帮助。它可以部分工作，现在的问题是我们没有指令作用域，但我认为我们需要它们来处理活动标志（用于查看/编辑模式）@Christoph让它工作了，添加了一个提琴来显示它正在更新父作用域并在指令中维护一个隔离作用域。谢谢。这正是我所需要的。