Question

我正在使用angular指令创建文本输入模板。指令将获得3个属性：标题，占位符和模型。我需要将attribte模型实现到指令模板中的属性ng模型中。

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

<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>

我怎样才能使用模型＆＃34;测试＆＃34;在父范围？

由于

在@Maxdow评论之后

upadete：

指令声明：

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>

我做错了什么？

Answer 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/

AngularJS自定义指令

1 个答案: