在DOM元素

Question

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

我需要做类似的事情：

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

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

$(domElement).scope();

在尝试时给我根本范围。

docs也不是很有帮助。

Answer 1

您应该使用$ compile服务。

HTML：

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

var content = "<ul><li ng-repeat='city in cities'>{{city}}</li></ul>" var list = angular.element(content); //create jqLite object from the template above;用于评估HTML片段或DOM元素（包装在jqLit​​e对象中）。例如，您可以使用一些内联绑定的html模板代替DOM元素： $compile 下一步是使用var compileFn = $compile(list);服务对象，该对象是一个返回另一个函数的函数，该函数随后将用于生成内容。 compileFn(scope);

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