在 DOM 元素上创建角度范围

Posted 2023-05-09

【中文标题】在 DOM 元素上创建角度范围

【英文标题】：Create angular scope on DOM element

【发布时间】：2015-12-30 13:03:21

【问题描述】：

我需要创建一个新的角度范围并将其附加到一个 DOM 元素。我正在修改第三方控件，因此我无法选择仅使用指令。

我需要做类似的事情：

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

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

$(domElement).scope();

在尝试时给我根范围。

docs 也不是很有帮助。

【问题讨论】：

您要创建元素还是将范围项绑定到现有元素？

元素已经创建并且在 DOM 中，我有一个对所述元素的引用。现在我想创建一个新范围并将其附加到它。

所以 $compile 是你所需要的

希望这对其他人有帮助，这真的很难找到搜索词！

【参考方案1】：

你应该使用 $compile 服务。

html：

<div ng-app="myApp" ng-controller="myCtrl">
  <p> Top scope: number</p>
  <p> Top scope: myProp</p> <!-- Undefined in the top-level scope -->
  <div id = "child">
    <p> New scope: myProp</p>
  </div>
</div>

控制器：

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 = "<ul><li ng-repeat='city in cities'>city</li></ul>" var list = angular.element(content); //create jqLite object from the template above; 下一步是使用$compile 服务对象，这是一个返回另一个函数的函数，该函数随后将用于生成内容。 var compileFn = $compile(list);

一旦你有了编译函数，你就可以调用它，传递作用域对象作为即将到来的评估的上下文，基本上将元素与作用域链接起来。 compileFn(scope); 现在模板中包含的绑定/表达式将使用您传递的范围进行评估并更新 jqLit​​e 对象 (list)，但不会有返回值，因此在这种情况下，您必须手动添加更新后的 @987654330 @ 对象到 DOM。希望这能澄清一下服务。

【讨论】：

你能解释一下$compile(innerElem);发生了什么吗？

docs.angularjs.org/api/ng/service/$compile 基本上它将字符串或html字符串编译为模板并呈现您通常还输入您想要将其链接到范围的范围，例如 $compile(html)(scope)