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

AngularJS directives: Substituting attribute values directly into template

本文关键字：替换 指令 属性 AngularJS      更新时间：2023-09-26

我一直在尝试开发一个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>

可以看到，这些属性既包括定义绑定的属性，也包括将值直接替换到模板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 = '';
});

通过使用'='访问修饰符，ng-model可以被赋值为父作用域的变量成员，而无需指令知道该变量的任何信息。

下面是上面例子的示例:

相关文章：