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 input动态创建element标记。我想将此元素的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);
        }
    };
});

再担心，还原。

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

1 个答案: