我需要创建一个新的角度范围并将其附加到 DOM 元素。我正在修改第三方控件,因此我无法选择仅使用指令。
我需要做类似的事情:
... = thirdPartyCallbackfunction(domElement){
var myNewScope = $scope.$new(true);
myNewScope.title = 'Hello';
domElement.scope = myNewScope; //???
}
另外,我尝试添加ng-scope
手动到 DOM 元素,但 ng-inspector 向我显示它没有创建新的子作用域。
$(domElement).scope();
在尝试时给我根范围。
The docs https://docs.angularjs.org/api/ng/type/%24rootScope.Scope#%24new也不是很有帮助。
您应该使用 $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 元素(包装在 jqLite 对象中)。例如,您可以使用一些带有内联绑定的 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);
现在,模板中包含的绑定/表达式将使用您传递的范围进行评估并更新 jqLite 对象(list
),但是不会有返回值,所以在这种情况下你必须手动添加更新的list
对象到 DOM。希望这能让服务澄清一点。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)