Javascript AngularJS指令：将属性值直接替换到模板中

我一直在尝试开发一个AngularJS指令，它输出一个带标签的表单字段

我希望能够使用如下标签：

<simpleTextField bind="user.email" label="Email" name="email" 
                 placeholder="Enter email address"></simpleTextField>

这将生成以下（引导）HTML输出：

<div class="form-group">
  <label class="col-sm-2 control-label" for="email">Email</label>
  <div class="col-sm-10">
    <input type="text" class="form-control" name="email" 
           ng-model="user.email" placeholder="Enter email address">
  </div>
</div>

电子邮件

正如您所看到的，这些属性既包括定义绑定的属性，也包括将其值直接替换到HTML模板中的属性

我想把它包好。换句话说，我不想为了适应这个指令的使用而修改视图的控制器

我所看到的示例中没有一个满足我的要求，因为（1）它们没有将属性值直接替换到模板中，和/或（2）它们依赖于用于修改指令的视图的控制器

---

请注意，我是AngularJS的新手，所以我可能在这里完全偏离了轨道。

我想我已经做了一些应该有用的东西。 您可以传入值以直接绑定到模板，并且指令不知道父级的模型。 HTML+指令：

<div ng-controller="MyCtrl">
    <label>Parent Scope Email:{{email}}</label></br>
    <simple-text-field simple-bind-to="email" simple-label="Email" simple-name="email" 
             simple-placeholder="Enter email address" simple-dynamic-scope="user.email">
    </simple-text-field>
</div>

var myApp = angular.module('myApp',[]);

myApp.directive('simpleTextField', function() {
    return {
        restrict: 'E',
        scope: {
            simpleBindTo: "=",
            simpleLabel: "@simpleLabel",
            simpleName: "@simpleName",
            simplePlaceholder: "@simplePlaceholder",
        },
        template: '<div class="form-group">' +
        '  <label class="col-sm-2 control-label" for="{{simpleName}}">{{simpleLabel}}</label>' +
        '  <div class="col-sm-10">' +
        '    <input type="text" class="form-control" name="{{simpleName}}" ' +
        '        placeholder="{{simplePlaceholder}}" ng-model="simpleBindTo" >' +
        '  </div>' +
        '</div>'
    };
});

myApp.controller('MyCtrl', function ($scope) {
    $scope.email = '';
});

父作用域电子邮件：{{Email}

该指令：

<div ng-controller="MyCtrl">
    <label>Parent Scope Email:{{email}}</label></br>
    <simple-text-field simple-bind-to="email" simple-label="Email" simple-name="email" 
             simple-placeholder="Enter email address" simple-dynamic-scope="user.email">
    </simple-text-field>
</div>

var myApp = angular.module('myApp',[]);

myApp.directive('simpleTextField', function() {
    return {
        restrict: 'E',
        scope: {
            simpleBindTo: "=",
            simpleLabel: "@simpleLabel",
            simpleName: "@simpleName",
            simplePlaceholder: "@simplePlaceholder",
        },
        template: '<div class="form-group">' +
        '  <label class="col-sm-2 control-label" for="{{simpleName}}">{{simpleLabel}}</label>' +
        '  <div class="col-sm-10">' +
        '    <input type="text" class="form-control" name="{{simpleName}}" ' +
        '        placeholder="{{simplePlaceholder}}" ng-model="simpleBindTo" >' +
        '  </div>' +
        '</div>'
    };
});

myApp.controller('MyCtrl', function ($scope) {
    $scope.email = '';
});

var myApp=angular.module（'myApp'，[]）；
myApp.directive（'simpleTextField'，function（）{
返回{
限制：'E'，
范围：{
simpleBindTo:“=”，
simpleLabel:“@simpleLabel”，
simpleName:“@simpleName”，
simplePlaceholder:“@simplePlaceholder”，
},
模板：“”+
“{{simpleLabel}}”+
'  ' +
'    ' +
'  ' +
''
};
});
myApp.controller（'MyCtrl'，函数（$scope）{
$scope.email=''；
});

通过使用“=”访问修饰符，ng模型可以被指定为父作用域的变量成员，而指令对该变量一无所知

---

是上述示例的JSFIDLE。

非常感谢！我试过了，它呈现了控件，但是控件之后什么都没有。例如，我只是将文本“Hello”放在下一行，但它没有显示。哦，这只是HTML中的end标记有问题。应该是，而不是。在我注意到它工作得很好之后。再次感谢！我尝试过使用CaspNZ在下面建议的基本方法，但我无法让它正常工作。例如，它只会替换前两个变量（这看起来很奇怪），然后我注意到它似乎会以某种方式干扰表单上的其余控件。我不确定它是否损坏了范围或其他东西。当我尝试下面CaspNZ的代码时，它完全删除了表单上的所有其他内容。实际上CaspNZ的代码中有一个类型（不正确的结束标记）。当我修复它时，效果很好。CaspNZ现在已经修复了拼写错误，所以一切都很好。