Tạo phạm vi góc trên phần tử DOM

Question

Tôi cần tạo một phạm vi góc mới và đính kèm nó vào phần tử DOM. Tôi đang sửa đổi quyền kiểm soát của bên thứ ba nên tôi không có tùy chọn chỉ sử dụng chỉ thị.

tôi cần phải làm một cái gì đó như:

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

Ngoài ra, tôi đã cố gắng thêm ng-scope bằng tay để các phần tử DOM, nhưng ng-thanh tra cho thấy tôi rằng nó không tạo ra một phạm vi con mới.

$(domElement).scope(); 

Cung cấp cho tôi phạm vi gốc khi thử điều đó.

docs cũng không hữu ích.

Answer 1

Bạn nên sử dụng dịch vụ biên dịch $.

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> 

Bộ điều khiển:

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 được sử dụng để đánh giá đoạn HTML hoặc phần tử DOM (bọc trong đối tượng jqLite). Ví dụ: thay vì phần tử DOM, bạn có thể đã sử dụng một số mẫu html có liên kết nội tuyến: var content = "<ul><li ng-repeat='city in cities'>{{city}}</li></ul>" var list = angular.element(content); //create jqLite object from the template above; Bước tiếp theo là sử dụng đối tượng dịch vụ $compile, một hàm trả về một hàm khác, sau đó sẽ được sử dụng để tạo Nội dung. var compileFn = $compile(list);

Khi bạn có chức năng biên dịch, bạn gọi nó truyền đối tượng phạm vi làm ngữ cảnh cho đánh giá sắp tới, về cơ bản liên kết phần tử với phạm vi. Bây giờ compileFn(scope); Bây giờ các ràng buộc/biểu thức chứa trong mẫu sẽ được đánh giá bằng cách sử dụng phạm vi bạn đã vượt qua và cập nhật đối tượng jqLite (list), nhưng sẽ không có giá trị trả về, vì vậy trong trường hợp này bạn phải thêm theo cách thủ công list đối tượng với DOM. Hy vọng điều này làm rõ dịch vụ một chút.