Angularjs Binding Problems for dynamically created elements
Question
I'm trying to bind a <p> with an <input> in my application, but it is not happening. since both elements are dynamically created, I thought maybe I can use $apply, but it didn't work out. everything else is functioning as expected except for this.
My code is a bit complicated, so here is a plunker to demonstrate my situation.
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:
<div id="detailsFront">
</div>
and here where the p s are placed:
<page size="A4" id="front">
</page>
The controller responsible for this view has 2 functions which are run successively in the same $scope function. Populating <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:
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 answers
solution1
5 ACCPTED 2015-09-06 14:06:54
You must always $compile new elements.
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);
});
But maybe you'd be better off using directives instead? Consider:
HTML template
<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) {
}
};
});
solution2
0 2015-09-06 12:10:24
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. Something like:
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.