't' zamanında el ile önyükleme yaptığım bir AngularJS uygulamasına sahibim. 'T + 1' zamanında, ng denetleyicisi eklenmemiş bir HTML öğesini göstermek istiyorum. Bu öğeye dinamik olarak bir ng denetleyicisi eklemek istiyorum, böylece javascript kodumla iletişim kurabilirim.Önyükleme işleminden sonra dinamik olarak öğeye denetçi atama
Bunu nasıl yapabilirim?
PS ng-controller özniteliğini dinamik olarak öğeye eklemeyi denedim ancak çalışmaz.
elemanları derlemek gerekir yapmak için: Onlar Sorduğunuz soruya cevap verebilir gibi ikisi bakmak bulundu.
HTML
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.5/angular.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="main.css" rel="stylesheet" type="text/css" />
<script src="main.js"></script>
<meta charset=utf-8 />
<title>Angular JS</title>
</head>
<body ng-controller="parentCtrl">
<button ng-click="setCtrl2()">Set Controller</button>
<div id="placeholder">
<span></span>
<select>
<option></option>
</select>
<span class="input-append">
<input id="add" type="text" placeholder="Another one ?" ng-model="addName" />
<input type="submit" class="btn btn-primary" ng-click="addRow()" value="+ add" />
</span>
</div>
</body>
</html>
JavaScript
angular.module('app', []);
angular.module('app').controller('ctrl', function($scope) {
$scope.rows = ['Paul','John','Lucie'];
$scope.name = 'Jack';
$scope.addRow = function(){
$scope.rows.push($scope.addName);
$scope.addName = "";
console.log($scope.rows);
};
})
.controller('parentCtrl', function($scope) {
$scope.setCtrl2 = setCtrl;
});
function setCtrl() {
var elem = document.getElementById('placeholder');
elem.setAttribute('ng-controller', 'ctrl');
var eSpan = elem.children[0];
var eSelect = elem.children[1].children[0];
eSpan.setAttribute('ng-bind', 'name');
eSelect.setAttribute('ng-repeat', 'row in rows');
eSelect.setAttribute('value', '{{ row }}');
eSelect.setAttribute('ng-bind', 'row');
var injector = angular.element(elem).injector();
var compile = injector.get('$compile');
var rootScope = injector.get('$rootScope');
var result = compile(elem)(rootScope);
// When outside of AngularJS you need to call digest
// rootScope.$digest();
}
Bkz: dinamik denetleyicisi eklemek istedim veya elemana kontrolörü atamak istediği http://codepen.io/skarllot/pen/LVKpgd
Çok güzel ....;) –
@Skarllot Çok güzel! Bir soru daha, eğer gerekliyse değişkenlerimi denetleyicime nasıl gönderebilirim? Denetleyicimin: 'angular.module ('app') denetleyicisi olduğunu söyleyelim ('ctrl', işlev ($ scope, variable1, variable2) {' – ncohen
Belki bu: http://stackoverflow.com/a/14531643/1028452 – Skarllot
Önceden sorulan sorulara bakıp bakmadığınızdan söz etmiyorsunuz.
Loading an AngularJS controller dynamically
How to bind an AngularJS controller to dynamically added HTML?
dynamically..I'm karıştı .. –
@PankajParkar Kontrolöre element dinamik olarak – ncohen