[英]Angularjs Binding Problems for dynamically created elements
I'm trying to bind a <p>
with an <input>
in my application, but it is not happening.我试图在我的应用程序中将<p>
与<input>
绑定,但它没有发生。 since both elements are dynamically created, I thought maybe I can use $apply, but it didn't work out.由于这两个元素都是动态创建的,我想也许我可以使用 $apply,但没有成功。 everything else is functioning as expected except for this.除此以外,其他一切都按预期运行。
My code is a bit complicated, so here is a plunker to demonstrate my situation.我的代码有点复杂,所以这里有一个plunker来演示我的情况。
HTML: 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>
The elements are generated using 2 functions, on for INPUT and the other for P. Here is where the input
s are placed:这些元素是使用 2 个函数生成的,on 用于 INPUT,另一个用于 P。这是放置input
的位置:
<div id="detailsFront">
</div>
and here where the p
s are placed:在这里,其中p
s的设置:
<page size="A4" id="front">
</page>
The controller responsible for this view has 2 functions which are run successively in the same $scope
function.负责此视图的控制器有 2 个函数,它们在同一个$scope
函数中连续运行。 Populating <p>
s:填充<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);
Then the input
s:然后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);
}
You must always $compile
new elements.您必须始终$compile
新元素。
HTML HTML
<body ng-app="tata">
<div ng-controller="ctrl1">
<page id="front"></page>
</div>
</body>
JavaScript 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);
});
But maybe you'd be better off using directives instead?但也许你最好使用指令代替? Consider:考虑:
HTML template 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 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) {
}
};
});
You'd probably be better off using directives for this - and you might not even need to roll your own.您可能最好为此使用指令 - 您甚至可能不需要推出自己的指令。 Have a look at ng-include
: it lets you switch which HTML template to use based on a variable in your scope.看看ng-include
:它允许您根据范围内的变量切换要使用的 HTML 模板。 Something like:就像是:
inputText-view.html
: inputText-view.html
:
<p ng-style="style">{{value.content}}</p>
page.html
: 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 .这是另一个基于您的 plunk 的演示。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.