在DOM元素上创建角度范围

我需要创建一个新的角度范围并将其附加到DOM元素。 我正在修改第三方控件，所以我没有选择只使用指令。

我需要做一些事情：

... = thirdPartyCallbackfunction(domElement){ var myNewScope = $scope.$new(true); myNewScope.title = 'Hello'; domElement.scope = myNewScope; //??? } 

此外，我尝试手动将ng-scope添加到DOM元素，但ng-inspector向我显示它没有创建新的子范围。

 $(domElement).scope(); 

尝试时给我根本范围。

文档也不是很有帮助。

Answer 1

你应该使用$ compile服务。

HTML：

 
 
 Top scope: {{number}}
 
 Top scope: {{myProp}}
  
 
 New scope: {{myProp}}
 
  

控制器：

 angular.module("myApp", []).controller("myCtrl", ["$scope", "$compile", function($scope, $compile){ $scope.number = 35; var myFunc = function(){ var innerElem = angular.element(document.querySelector("#child")); var innerScope = $scope.$new(); innerScope.myProp = 55; var compileFn = $compile(innerElem); compileFn(innerScope); } myFunc(); }]); 

$compile用于评估HTML片段或DOM元素（包装在jqLit​​e对象中）。 例如，您可以使用一些带有内联绑定的html模板而不是DOM元素： var content = "

• {{city}}

" var list = angular.element(content); //create jqLite object from the template above; var content = "

• {{city}}

" var list = angular.element(content); //create jqLite object from the template above; 下一步是使用$compile服务对象，该对象是一个返回另一个函数的函数，该函数随后将用于生成内容。 var compileFn = $compile(list);

获得编译function后，调用它将范围对象作为即将进行的评估的上下文传递，基本上将元素与范围相关联。 compileFn(scope); 现在模板中包含的绑定/表达式将使用您传递的范围进行评估并更新jqLit​​e对象（ list ），但是没有返回值，因此在这种情况下您必须手动将更新的list对象添加到DOM 。 希望这能澄清一下服务。