Javascript 如何在Angular.js中绑定动态生成的元素？

我开始使用Angular.js指令，所以我使用自定义指令动态生成DOM

我的指令的简化版本是：

angular.module('app', [])
  .controller('Controller', ['$scope',
    function($scope) {
      $scope.name = "André Pena";
      $scope.email = "andrerpena@gmail.com"
    }
  ])
  .directive('gText', function() {
    return {
      restrict: 'E',
      link: function(scope, element, attrs) {
        //input
        var input = angular.element("<input/>");
        input.attr("type", "text");
        input.addClass("form-control");
        input.attr("placeholder", attrs.placeholder);
        input.attr("name", attrs.property);
        element.append(input);
      }
    };
  });

<g-text label="E-mail" property="email" placeholder="Enter some e-mail"></g-text>

angular.module（'app'，[]）
.controller（'controller'，['$scope'，
职能（$范围）{
$scope.name=“安德烈佩纳”；
$scope.email=”andrerpena@gmail.com"
}
])
.directive（'gText'，function（）{
返回{
限制：'E'，
链接：函数（范围、元素、属性）{
//输入
变量输入=角度。元素（“”）；
input.attr（“类型”、“文本”）；
input.addClass（“表单控件”）；
input.attr（“占位符”，attrs.placeholder）；
input.attr（“名称”，attrs.property）；
元素。追加（输入）；
}
};
});

本指令的一个简单用法是：

angular.module('app', [])
  .controller('Controller', ['$scope',
    function($scope) {
      $scope.name = "André Pena";
      $scope.email = "andrerpena@gmail.com"
    }
  ])
  .directive('gText', function() {
    return {
      restrict: 'E',
      link: function(scope, element, attrs) {
        //input
        var input = angular.element("<input/>");
        input.attr("type", "text");
        input.addClass("form-control");
        input.attr("placeholder", attrs.placeholder);
        input.attr("name", attrs.property);
        element.append(input);
      }
    };
  });

<g-text label="E-mail" property="email" placeholder="Enter some e-mail"></g-text>

如您所见，我正在使用Angular.js

元素动态创建一个
input
标记。我想将此元素的
值
与
属性
中指定的属性绑定。在这种情况下，我希望输入的值是
email
scope属性(andrerpena@gmail.com)

如何实现这一点？
创建动态元素时，必须将其编译到指令中。为此，必须使用angular的
$compile
函数。
我是为你做的

请看这里：

var-app=angular.module（'app'，[]）；
app.controller（'controller'，['$scope'，
职能（$范围）{
$scope.name=“安德烈佩纳”；
$scope.email=”andrerpena@gmail.com";
log（$scope.email）；
}]);
应用指令（'gText'，函数（$compile）{
返回{
限制：'E'，
范围：{
信息：“=属性”
},
链接：函数（范围、元素、属性）{
变量输入=角度。元素（“”）；
input.attr（“类型”、“文本”）；
input.attr（“占位符”，attrs.placeholder）；
input.attr（“值”，scope.info）；
var linkFn=$compile（输入）；
var内容=linkFn（范围）；
元素。追加（内容）；
}
};
});

如果还有任何问题，请返回。
我认为这可能会有所帮助[尝试此][1][1]：我感谢您的回答，但出于某种原因，即使显示了电子邮件地址get的属性，当我在文本框中更改电子邮件时，它不是双向绑定的。你知道我该怎么解决吗？双向绑定在什么意义上？请详细说明这个例子。如果您对给出的答案感到满意，请将其标记为已选择/已回答。问题是，当您通过输入更改
电子邮件
时，它不会更新模型中的
电子邮件
属性。请参见一个示例：。编辑文本框时，文本框外部的电子邮件也应更新。