引导后动态地将控制器分配给元素答案

【问题标题】：Assign controller to element dynamically after bootstrap引导后动态地将控制器分配给元素
【发布时间】：2015-11-13 04:39:05
【问题描述】：

我有一个 AngularJS 应用程序，我在“t”时间手动引导。在“t + 1”时间，我想展示一个没有附加 ng-controller 的 HTML 元素。我想为这个元素动态添加一个 ng-controller，以便它可以与我的 javascript 代码进行通信。

我该怎么做？

PS 我尝试将 ng-controller 属性动态添加到元素，但它不起作用。

【问题讨论】：

您想动态添加控制器或想动态地将控制器分配给元素..我很困惑..
@PankajParkar 希望将控制器动态分配给元素

标签： javascript angularjs ng-controller

【解决方案1】：

为此，您需要编译元素。

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

【讨论】：

@Skarllot 非常好！还有一个问题，如果需要，我如何将变量发送到我的控制器？假设我的控制器是：angular.module('app').controller('ctrl', function($scope, variable1, variable2) {
@Skarllot 不幸的是它不起作用！我需要传递这些变量而不是初始化它们。

【解决方案2】：

你没有提到你是否看过之前提出的问题。我发现了两个看起来可以解决您提出的问题：

Loading an AngularJS controller dynamically

How to bind an AngularJS controller to dynamically added HTML?

【讨论】：