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

Question

我开始使用 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.js element 动态创建 input 标记。我想将此元素的value 与property 属性中指定的属性绑定。在这种情况下，我希望输入的值是 email 范围属性 (andrerpena@gmail.com)。

如何实现？

Answer 1

创建动态元素时，必须将其编译到指令中。为此，您必须使用角度的$compile 函数。 我已经为你做了。

看看这里：http://jsfiddle.net/3hJmz/1/

var app = angular.module('app', []);
app.controller('Controller', ['$scope',

function ($scope) {
    $scope.name = "André Pena";
    $scope.email = "andrerpena@gmail.com";
    console.log($scope.email);
}]);
app.directive('gText', function ($compile) {
    return {
        restrict: 'E',
        scope: {
            info: "=property"
        },

        link: function (scope, element, attrs) {

            var input = angular.element("<input/>");
            input.attr("type", "text");
            input.attr("placeholder", attrs.placeholder);
            input.attr("value", scope.info);

            var linkFn = $compile(input);
            var content = linkFn(scope);
            element.append(content);
        }
    };
});

还有什么问题，请回复。