Question

我正在尝试在我的应用程序中绑定<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个函数生成的，on用于INPUT，另一个用于P.这里是input的放置位置：

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

以及放置p的地方：

<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);

然后是input s：

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); 
        }

Answer 1

您必须始终$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) {
      }
    };
  });

Answer 2

你可能最好使用指令 - 你甚至可能不需要自己动手。看一下ng-include：它允许您根据范围中的变量切换要使用的HTML模板。类似的东西：

inputText-view.html：

<p ng-style="style">{{value.content}}</p>

page.html：

<page size="A4" id="front" style="position: absolute, top:0px, left:0px">
    <ng-include
        ng-repeat="value in values"
        src="value.type + '-view.html'"></ng-include>
</page>

See here for a demo

Here's another demo based on your plunk

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

2 个答案: