AngularJS 自定义指令答案

【问题标题】：AngularJS custom directivesAngularJS 自定义指令
【发布时间】：2014-06-24 00:49:32
【问题描述】：

我正在使用 Angular 指令创建用于文本输入的模板。指令将接收 3 个属性：标题、占位符和模型。我需要将属性模型实现到指令模板中的属性 ng-model 中。

例如：如果我创建具有下一个属性的元素

<ng-text-input model="test" title="First name" placeholder="First name"></ng-text-input>

结果将是下一个：

<div class="form-group">
    <label class="col-sm-2 control-label">First name</label>
    <div class="col-sm-9">
        <input ng-model="test" type="text" class="form-control" placeholder="First name">
    </div>
</div>

我如何在父范围内使用模型“测试”？

谢谢

@Maxdow 评论后更新：

指令声明：

app.directive('ngTextInput', function(){
    return {
        restrict : 'AE',
        scope: {
            title: '@',
            placeholder : '@',
            myModel: '=ngModel'
        },
        templateUrl : 'ng-textInput.html'
    }
});

模板：

<script type="text/ng-template" id="ng-textInput.html">
    <div class="form-group">
        <label class="col-sm-2 control-label">{{title}}</label>
        <div class="col-sm-9">
            <input ng-model="myModel" type="text" class="form-control" placeholder={{placeholder}}>
        </div>
    </div>
</script>

使用：

<ng-text-input ng-model="test" title="First name" placeholder="First name"></ng-text-input>

但结果仍然是：

<div class="form-group">
        <label class="col-sm-2 control-label ng-binding">First name</label>
        <div class="col-sm-9">
            <input ng-model="myModel" type="text" class="form-control ng-pristine ng-valid" placeholder="First name">
        </div>
    </div>

我做错了什么？

【问题讨论】：

您需要在指令声明中将其绑定到您的指令范围（您在帖子中省略了）
你的指令在你的测试模型的同一个控制器中吗？
您的结果似乎正确。 ng-model 属性不会改变。这只是 input 的值。如果数据绑定正确，你的模型输入就可以控制你的模型
非常感谢你们，伙计们！我很担心，因为指令正文中的 ng-models 名称是“myModel”，我认为它必须与指令定义中的相同。而且我没有为模型设置值以进行检查。谢谢！我在 JsFiddle 上的示例：jsfiddle.net/yXaY7

标签： angularjs angularjs-directive angularjs-scope

【解决方案1】：

在您的指令中将您的属性与 ngModel 绑定：

app.directive('myDirective', function() {
  return {
  restrict: 'AE', 
  scope: {
    myModel: '=ngModel'
  },
  template:'<input ng-model="myModel"/>'
}});

您应该可以像这样使用来自您的 HTML 的：

<my-directive ng-model="whatyouwant"></my-directive>

一个例子：http://jsfiddle.net/maxdow/6GU6x/

【讨论】：