动态创建元素的Angularjs绑定问题

debugcn 发表于 Dev

用户名

我试图绑定一个<p>与<input>我的应用程序，但它没有发生。由于这两个元素都是动态创建的，所以我想也许可以使用$ apply，但是没有成功。除此之外，其他所有功能都按预期运行。

我的代码是有点复杂，所以这里是一个plunker来证明我的情况。

HTML：

<body ng-app="tata" ng-controller="mainController">
    <div id="main">
      <div ng-controller="ctrl1">
        <button ng-click="changeCard()">Add Dynamic Bound Elements </button>
        <page id="front" size="A4"></page>
        <div id="detailsFront"></div>
      </div>
    </div>
  </body>

元素是使用2个函数生成的，对于INPUT来说启用on，对于P而言则另一些。这里是inputs的放置位置：

<div id="detailsFront">         
</div>

以及p放置s的位置：

<page size="A4" id="front">
</page>

负责该视图的控制器具有2个功能，它们以相同的$scope功能连续运行。填充<p>s：

 buildPDF : function (parentElement){
      var element = angular.element(document.getElementById( parentElement ));
      ele = "<p ng-bind='id7'> Test Run </p>";
      element.append(ele);
    }

    element.append(ele);

然后是inputs：

buildPDFControllers : function (parentElement){
          var element = angular.element(document.getElementById( parentElement ));
      ele = "<label for='id7'>Some Label</label> <input name='id7' type='text' ng-model='id7'>";
      element.append(ele); 
        }

米科·维塔拉（Mikko Viitala）

您必须始终添加$compile新元素。

的HTML

<body ng-app="tata">
  <div ng-controller="ctrl1">
    <page id="front"></page>
  </div>
</body>

的JavaScript

var app = angular.module('tata', [])

  .controller('ctrl1', function ($scope, $compile) {
    $scope.id = 'some id here';

    var element = angular.element(document.getElementById('front'));
    var p = '<p ng-bind="id">Test Run</p>'; // <- will be bound/replaced with $scope.id
    element.append(p);

    $compile(element.contents())($scope);
  });

但是，也许最好改用指令？考虑：

HTML模板

<body ng-app="cards" ng-controller="Ctrl">
  <button ng-click="addCard()">Add Card</button>
  <div ng-repeat="card in cards">
    <card ng-model="card"></card>  
  </div>
</body>

的JavaScript

angular.module('cards',[])

  .controller('Ctrl', function($scope) {
    $scope.cards = [];

    $scope.addCard = function() {
      var next = $scope.cards.length + 1; 
      $scope.cards.push({id: next, label: next});
    };
  })

  .directive('card', function() {
    return {
      restrict: 'E',
      require: 'ngModel',
      scope: {
        ngModel: '='
      },
      template: '<p>Directive model: {{ ngModel | json }}</p>' +
                '<label>Label: </label>' + 
                '<input name="{{ ngMode.id }}" ' + 
                '       type="text" ' +
                '       ng-model="ngModel.label">',
      link: function(scope) {
      }
    };
  });