创建DOM元素的角度范围 [英] Create angular scope on DOM element

问题描述

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

I need to create a new angular scope and attach it to a DOM element. I'm modifying a third party control so I don't have the option of just using a directive.

我需要做的是这样的：

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

另外，我尝试添加 NG-范围手动DOM元素，但NG-检查表明我，它不是创建一个新的子范围。

Also, I've tried adding ng-scope manually to the DOM element, but ng-inspector shows me that it's not creating a new child scope.

$(domElement).scope();

努力，当给我的根范围。

Gives me the root scope when trying that.

借助文档并不十分有益的或者

The docs weren't very helpful either.

推荐答案

您应该使用$编译服务。

You should use $compile service.

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();
}]);

$编译是用来评估HTML片段或DOM元素（包裹在jqLit​​e对象）。例如，而不是DOM元素，你也可以使用内联绑定一些HTML模板：
VAR内容=＆LT; UL＆GT;＆LT;李NG重复=＆GT城市城市'; {{城市}}＆LT; /李＆GT;＆LT; / UL＆gt;中
VAR列表= angular.element（内容）; //从上面的模板创建jqLit​​e对象;
下一步骤是使用 $汇编服务对象，这是一个返回其将被用于生成内容的另一功能的功能。
VAR compileFn = $编译（列表）;

$compile is used to evaluate HTML fragment or DOM element (wrapped in jqLite object). For example, instead of the DOM element, you could have used some html template with inline bindings: var content = "<ul><li ng-repeat='city in cities'>{{city}}</li></ul>" var list = angular.element(content); //create jqLite object from the template above; The next step is to use the $compile service object, which is a function that returns another function which will then be used to generate the content. var compileFn = $compile(list);

一旦你的编译功能，可以调用它传递的范围对象为即将到来的评价方面，基本上与连接范围的元素。
compileFn（范围）;
现在包含在模板内的绑定/ EX pressions将使用您通过它的范围和更新jqLit​​e对象（列表）进行评估，但不会有返回值，所以在这种情况下，你将不得不更新列表对象手动​​添加到DOM。希望这澄清了服务了一下。

Once you have the compilation function, you invoke it passing the scope object as the context for the upcoming evaluation, basically linking the element with the scope. compileFn(scope); Now bindings/expressions contained within the template will be evaluated using the scope you passed it and update the jqLite object (list), but there will be no return value, so in this case you would have to manually add the updated list object to DOM. Hope this clarifies the service a bit.

这篇关于创建DOM元素的角度范围的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！