如何更新附加的html元素的范围？

Question

我想与页面上附加的html元素内的作用域进行交互，有人可以告诉我如何更新该范围吗？

var overlay = angular.element('<div id="flyout-overlay" class="page-overlay global" ng-show="testScope"></div>');
mainContent.append(overlay);

$timeout(function(){
    $scope.testScope = true; // how?
},500);

Answer 1

使用$ compile service

$compile(overlay);

这是documentation

不要忘记在控制器中添加$compile依赖项

doc说，

适用于您的情况，

'<div id="flyout-overlay" class="page-overlay global" ng-show="testScope"></div>'

1：编译 - $ compile收集所有指令，例如，它将收集ng-show指令

2： link - 将指令与范围...结合使用，例如，它会将ng-show="testScope"指令与范围绑定。

Answer 2

@Kalhano给出了完美的答案，但由于您不了解$ compile服务，这里是您的代码。只是一个小小的改变......

var overlayTmpl = angular.element('<div id="flyout-overlay" class="page-overlay global" ng-show="testScope"></div>');

var overlay = $compile(overlayTmpl)($scope);

mainContent.append(overlay);

$timeout(function(){
    $scope.testScope = true; // how?
},500);

简而言之，$ compile服务编译你的html并将其链接到你提供的范围，

为了更好地理解，请阅读角度文档。