Dynamically allocate a controller to an element following the Bootstrap process

Question

Dynamically allocate a controller to an element following the Bootstrap process

I have a unique AngularJS application that is initialized manually at a specific time. Later on, I need to display an HTML element without any ng-controller assigned to it. Is there a way to dynamically add an ng-controller to this element in order for it to interact with my JavaScript code?

Any suggestions on how to achieve this?

As a side note, I attempted to add the ng-controller attribute dynamically to the element, but unfortunately, it did not produce the desired result.

javascript angularjs ng-controller

Answer 1

Answer №1

In order to achieve this, it is necessary to compile elements.

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

For more information, visit: http://codepen.io/skarllot/pen/LVKpgd

Answer 2

In order to achieve this, it is necessary to compile elements.

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

For more information, visit: http://codepen.io/skarllot/pen/LVKpgd

Answer 3

Answer №2

Have you checked previous questions before? I came across two that might help with your question:

Learn how to load an AngularJS controller dynamically

Understanding how to bind an AngularJS controller to dynamically inserted HTML

Answer 4

Have you checked previous questions before? I came across two that might help with your question:

Learn how to load an AngularJS controller dynamically

Understanding how to bind an AngularJS controller to dynamically inserted HTML

Dynamically allocate a controller to an element following the Bootstrap process

Answer №1

Answer №2

Similar questions

An error was encountered with Ajax and JSONP due to an unexpected token causing a SyntaxError

Combining Data Structures in Javascript for Visualization in VueJS

What is the process of converting code to JavaScript and React?

Update your Selenium WebDriver Manager using npm

Identify numbers and words within a sentence and store them in an array

I recently developed a T3 stack project and am currently attempting to configure a next JS middleware, however, I am encountering issues with it not triggering as expected

Strategies for ensuring a promise is fulfilled before moving on to the next iteration in a never-ending for loop in JavaScript

The function is not recognized in C# programming language

Guide on adjusting shadow intensity with a Directional Light on a BoxGeometry in Three.js

What is the process of creating a new array by grouping data from an existing array based on their respective IDs?

Replace the facebook plugin using JQuery libraries

Column on the far right of the grid with a frozen position

What is the reason behind using 'dummy' local variables to define return object keys?

Enhancing OpenSeadragon images with custom overlays and managing error messages

TypeOrm is struggling to identify the entities based on the directory path provided

Expanding a string by adding numeric characters using JavaScript Regular Expressions

In React js, what is the best way to retrieve the first unique ID element as well as the last unique ID element from an

What exactly is the concept of lazily installing a dependency?

When jQuery updates the content, the div content disappears temporarily

JavaScript not functional, database being updated through AJAX calls