如何在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> 

正如你所看到的，我動態創建一個input標籤使用Angular.js 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); 
     } 
    }; 
}); 

更多的關注，回覆。