javascript - AngularJS指令: Substituting attribute values directly into template

Question

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

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

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

这将产生以下( Bootstrap )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>

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

我希望它能够被正确封装。换句话说，我不想为了适应该指令的使用而修改 View 的 Controller 。

我见过的示例都不能满足我的要求，因为(1)它们不会将属性值直接替换到模板中，和/或(2)它们依赖于指令所在 View 的 Controller 正在被修改。

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

Answer 1

我想我已经做了一些应该有用的东西。您可以传入值以直接绑定(bind)到模板，并且指令不了解父级的模型。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 = '';
});

通过使用“=”访问修饰符，可以为 ng-model 分配父作用域的变量成员，而指令无需了解有关此变量的任何信息。

Here是上面示例的 jsfiddle。