Javascript ng重复不'；当HTML在$compile下更改时不起作用

指令代码：

.directive('replace', function($compile) {
      return function (scope, element) {
        element.html(element.html().replace("Hej", "Hey!"));
        $compile(element.contents())(scope);
      }
  });
})

HTML

正如标题所述，

ng repeat

在包含它的HTML上使用上面的指令时不起作用。 但是，一旦我删除了使用

.replace（）

命令替换部分HTML的那一行，那么

ng repeat

出于某种原因开始工作。
有人知道真正的问题在哪里吗？

---

我已经尝试了所有方法，但似乎仍然不明白为什么它不能正常工作。

您应该让Angular及其更改检测周期为您执行HTML操作，而不是自己直接更改它

我已经编辑了您的示例，以使用范围绑定实现您想要的：

示例-示例编译产品
angular.module（'compileExample'，[]，函数（$compileProvider）{
//通过传递指令来配置新的“compile”指令
//工厂函数。工厂函数注入“$compile”
$compileProvider.directive（'replace'，function（$compile）{
返回{
链接：功能（范围、元素）{
scope.greeting='Hey！'；
$compile（element.contents（））（范围）；
}
}
});
})
.controller（'GreeterController'，['$scope'，函数（$scope）{
$scope.test=[1,2,3,4]；
$scope.greeting='Hej'；
}]);
{{问候}{{e}}

您应该让Angular及其更改检测周期为您执行HTML操作，而不是自己直接更改

我已经编辑了您的示例，以使用范围绑定实现您想要的：

示例-示例编译产品
angular.module（'compileExample'，[]，函数（$compileProvider）{
//通过传递指令来配置新的“compile”指令
//工厂函数。工厂函数注入“$compile”
$compileProvider.directive（'replace'，function（$compile）{
返回{
链接：功能（范围、元素）{
scope.greeting='Hey！'；
$compile（element.contents（））（范围）；
}
}
});
})
.controller（'GreeterController'，['$scope'，函数（$scope）{
$scope.test=[1,2,3,4]；
$scope.greeting='Hej'；
}]);
{{问候}{{e}}

解决方法如下：

.directive("replace", function(){
    return {
        compile: function(){
            return {
                pre: function(scope, element){
                    element.html(element.html().replace('Hej', 'Hey!'));
                }
            }
        }
    };
});

解决方法如下：

.directive("replace", function(){
    return {
        compile: function(){
            return {
                pre: function(scope, element){
                    element.html(element.html().replace('Hej', 'Hey!'));
                }
            }
        }
    };
});

---

操作也可以在编译阶段完成：

app.directive("replace", function(){
    return {
        compile: function(element){
            element.html(element.html().replace('Hej', 'Hey!'));
            /*return {
                pre: function(scope, element){
                  element.html(element.html().replace('Hej', 'Hey!'));
                }
            }*/
        }
    };
});

最初的问题是因为在使用替换操作替换带有该指令的元素之前，完成了

ng repeat

指令的链接。然后，与

ng repeat

指令关联的监视程序对不再连接到可见DOM的元素进行操作

---

通过将替换操作移动到编译阶段或预链接阶段，在链接

ng repeat

指令之前，替换具有

ng repeat

指令的元素。与

ng repeat

指令关联的观察器随后处理被替换的DOM。

操作也可以在编译阶段完成：

app.directive("replace", function(){
    return {
        compile: function(element){
            element.html(element.html().replace('Hej', 'Hey!'));
            /*return {
                pre: function(scope, element){
                  element.html(element.html().replace('Hej', 'Hey!'));
                }
            }*/
        }
    };
});

最初的问题是因为在使用替换操作替换带有该指令的元素之前，完成了

ng repeat

指令的链接。然后，与

ng repeat

指令关联的监视程序对不再连接到可见DOM的元素进行操作

---

---

通过将替换操作移动到编译阶段或预链接阶段，在链接

ng repeat

指令之前，替换具有

ng repeat

指令的元素。与

ng repeat

指令关联的观察器然后处理被替换的DOM。

我不明白您想做什么。是什么？这肯定是无效的HTML。请改为执行转置<当angular开始编译模板并首先编译为注释时，code>ng repeat具有非常高的优先级happens@Siyah这与问题无关。虽然它可能无法通过html验证程序，但它可以工作fine@charlietfl我怎样才能做到这一点？你能给我举个例子吗？如果你所做的只是翻译，为什么你需要替换整个东西，而不是用过滤器或更有针对性的指令隔离翻译？有几个不同的翻译模块，我不明白你想做什么。是什么？这肯定是无效的HTML。请改为执行转置<当angular开始编译模板并首先编译为注释时，code>ng repeat具有非常高的优先级happens@Siyah这与问题无关。虽然它可能无法通过html验证程序，但它可以工作fine@charlietfl我怎样才能做到这一点？你能给我举个例子吗？如果你所做的只是翻译，为什么你需要替换整个东西，而不是用过滤器或更有针对性的指令隔离翻译？aroundI有几个不同的翻译模块，我不能这样做，因为我正在使用它进行翻译。我需要根据翻译情况用正确的HTML代码替换整个HTML代码。@MikiSoft是否有更好的处理方法translations@MikiSoft我编辑了我的评论以显示jQuery解决方案。如果必须就地编辑HTML，我宁愿使用jQuery重新编译指令。我甚至不认为Angular可以访问ng repeat的HTML，因为它是一个模板（您可以在调试并尝试记录element.HTML（）时看到它），所以这就是您最初的解决方案不起作用的原因。@RaresMatei感谢您的努力，但我必须通过指令使用解决方案，因为在实时模式下可能会发生从单数到复数的转换，反之亦然。@MikiSoft使用过滤器进行翻译似乎是更好的解决方案。我不能这样做，因为我正在使用它进行翻译。我需要用正确的HTML代码替换整个HTML代码