动态创建元素的 Angularjs 绑定问题
[英]Angularjs Binding Problems for dynamically created elements
问题描述
我试图在我的应用程序中将<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 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);
然后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);
}
2 个解决方案
解决方案1
5 已采纳 2015-09-06 14:06:54
您必须始终$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) {
}
};
});
解决方案2
0 2015-09-06 12:10:24
您可能最好为此使用指令 - 您甚至可能不需要推出自己的指令。 看看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>
在动态创建的元素上进行事件绑定的问题
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.