动态创建元素的Angularjs绑定问题
use*_*028 1 javascript angularjs
我试图绑定一个<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为另一个函数。这是input放置s的位置：
<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);
}
您必须始终添加$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) {
}
};
});
| 归档时间： |
|
| 查看次数： |
3256 次 |
| 最近记录： |