Question

面临将动态生成的HTML添加到控制器范围并使用它的问题。这是我的另一个主题（generated AngularJS controller usage），但是现在任务很少但不同（不需要生成HTML控制器的初始化，没有它就可以完成）。

问题是 - 如果我在这个例子中动态添加控制器 - 我可以在控制器初始化时得到alert()（控制器工作），但不能在click_btn（）和其他动作上得到。如果我只是向静态定义的控制器添加HTML - 同样的问题。没有任何错误，尝试了$ scope＆amp; $ RootScope选项。

我尝试了很多组合＆amp;变种。目前在此处添加了angular.element(document).injector().invoke(function($compile) { - Uncaught TypeError: Cannot read property 'invoke' of undefined错误的示例。

这是我试图让它工作的例子。简单的结构和例子。

//////////////////////
///Controller Definition (located in different .js file)
//////////////////////
angular.module('MainPage', [])
  .controller('Hello', function($scope, $http) {
    alert('fsdfsdfsd12121212');
    $scope.click_btn = function() {
      alert('fsdfsdfsd');
    }
  });

//////////////////////
///JS FILE from where i need to add HTML to scope and page content
//////////////////////

var contentString =
  '<button ng-click="click_btn()">Load Data!</button>';

AddElementAngular(contentString);

function AddElementAngular(html) {


  angular.element(document).injector().invoke(function($compile) {
    var scope = angular.element(html).scope();
    $compile(html)(scope);
    $(document.body).append(html);
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!doctype html>
<html ng-app="MainPage">

<head>
  <title>Hello AngularJS</title>
</head>

<body>
  <div ng-controller="Hello">

  </div>
</body>

</html>

寻求帮助，坚持下去，继续下去非常重要。还要提到我不能通过使用angular指令来使用iserting HTML，因为我需要将.js中的一些变量放到var contentString + Angular需要在页面加载时初始化，所以我不能在调用这个js func之前等待，然后才初始化angular。

实际JS更大，并且有很多功能。这只是问题的一个例子。

Answer 1

如果我正确理解你的问题，新创建的DOM元素不会继承给其编译模板的$ scope。

只要您对要使用新DOM元素的作用域有有效引用，您可以执行与上述U类似的操作，或者为元素创建新作用域，然后使用父作用域扩展它：

var scope = angular.element(html).scope();
    $.extend(scope, $parentScope)

AngularJS添加并使用动态显示的HTML到控制器范围

1 个答案: