Question

我一直在尝试开发一个输出标记形式字段的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的新手，所以我可能完全偏离这里。

Answer 1

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

使用＆＃39; =＆＃39;访问修饰符，ng-model可以被赋予父范围的变量成员，而指令不知道该变量的任何内容。

Here是上述例子的一个小问题。

AngularJS指令：将属性值直接替换为模板

1 个答案: