2015-08-19 7 views
6

У меня есть приложение AngularJS, которое я вручную загружаю в момент времени 't'. В момент 't + 1' я хотел бы показать элемент HTML, который не имеет прикрепленного ng-контроллера. Я хотел бы динамически добавить ng-контроллер к этому элементу, чтобы он мог связываться с моим кодом javascript.Назначить контроллер элементу динамически после начальной загрузки

Как я могу это сделать?

PS Я попытался динамически добавить атрибут ng-controller к элементу, но он не работает.

+0

вы хотите добавить контроллер динамически или хотел назначить контроллер элемента dynamically..I'm запутался .. –

+0

@PankajParkar Хотите назначить контроллер для элемент динамически – ncohen

ответ

3

Для этого вам нужно собрать элементы.

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(); 
} 

См: http://codepen.io/skarllot/pen/LVKpgd

+1

Очень красивый ....;) –

+0

@Skarllot Очень приятно! Еще один вопрос: как я могу отправлять переменные на контроллер, если это требуется? Скажем, мой контроллер: 'angular.module ('app'). Controller ('ctrl', function ($ scope, variable1, variable2) {' – ncohen

+0

Возможно, это: http://stackoverflow.com/a/14531643/1028452 – Skarllot