javascript - Angular -> 渲染和克隆元素 -> 范围访问

Question

我需要能够在渲染和克隆元素的范围内更改变量并使用方法。如何实现这一目标？这是jsfiddle:http://jsfiddle.net/kashesandr/1pwzm1jb/2/

模板:

<div ng-controller="MyCtrl" class="name">
  Hello, {{name}}!
</div>

代码:

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
    $scope.name = 'Superhero';
    $scope.setName = function(name){
        $scope.name = name;
    };
}

function update() {
    var element = document.querySelector('.name')
    var scope = angular.element(element).scope()
    var copy = element.cloneNode(true)
    document.body.appendChild(copy);

    var names = document.querySelectorAll('.name');
    console.log(names);

    var element1 = names[0];
    var scope1 = angular.element(element1).scope();
    scope1.$apply(function(){
        scope1.setName(123);
    });

    var element2 = names[1];
    var scope2 = angular.element(element2).scope();
    scope2.$apply(function(){
        scope2.setName(234); // this must work
    });


}   
setTimeout(update, 1500);

谢谢!

Answer 1

不幸的是，如果你所提议的完全按照你所说的必须完成的方式完成，那么在 Angular 中是不允许的。不允许克隆或复制窗口或范围对象。这意味着您无法复制 <div class="name">{{name}}</div> ，将副本附加到正文，修改它，然后运行 ​​$digest 循环。这将导致无限循环/循环引用。

有关 ng:cpws 的详细信息，请参阅此链接

https://docs.angularjs.org/error/ng/cpws

如果您有权访问源代码(我假设您这样做)，您应该探索更新 Angular 应用程序，而不是尝试从外部修改它。您在此处描述的内容可以在应用程序范围内轻松完成。