Angularjs ngRepeat不'；t更新自定义元素指令_Angularjs_Angularjs Directive

Angularjs ngRepeat不'；t更新自定义元素指令

angularjs

Angularjs ngRepeat不'；t更新自定义元素指令,angularjs,angularjs-directive,Angularjs,Angularjs Directive,我有一个自定义元素指令（restrict:“E”），它将自定义元素替换为一个依赖于范围的新元素（通过处理link）。这可以正常工作，但ngRepeat无法删除此类指令。似乎找不到目标DOM元素，因为它被指令本身替换了代码：单击某个图元以将其删除角度。模块（“应用程序”、[]）。控制器（“控制器”，功能（$scope）{ $scope.tags=[ {标记名：“按钮”，文本：“按钮”}， {标记名：“div”，文本：“div”}， {标记名：“span”，文本：“span”} ]; $sc

我有一个自定义元素指令（

restrict:“E”

），它将自定义元素替换为一个依赖于范围的新元素（通过处理

link

）。这可以正常工作，但

ngRepeat

无法删除此类指令。似乎找不到目标DOM元素，因为它被指令本身替换了

代码：


单击某个图元以将其删除
角度。模块（“应用程序”、[]）。控制器（“控制器”，功能（$scope）{
$scope.tags=[
{标记名：“按钮”，文本：“按钮”}，
{标记名：“div”，文本：“div”}，
{标记名：“span”，文本：“span”}
];
$scope.remove=函数（标记）{
console.log（“删除”，tag.text）；
$scope.tags.splice（$scope.tags.indexOf（tag），1）；
}
}).指令（“自定义”，函数（$compile）{
返回{
限制：“E”，
链接：功能（范围、元素、属性）{
var tag=angular.element（“”）.text（scope.tag.text）；
tag.attr（“ng click”，attr.ngClick）
$compile（tag）（范围）；
元素。替换为（标记）；
}
}
});

（尝试单击

按钮

，然后

div

-按钮不会先消失，然后div和按钮都消失）。如果我使用

element.append（tag）

，而不是

element.replacetwith（tag）

，它就会工作

这能起作用吗？我需要该指令具有自定义标记名，这取决于范围，并且在删除项时还可以使用ngRepeat。长话短说，我不需要DOM中的

元素，因为CSS规则我无法控制。类似于

replace:true

的东西，它与

link

一起工作，为什么需要替换

 element.append(tag);

似乎：


安古拉斯普朗克
文件。写（“”）；
单击某个图元以将其删除


{{tags}}
角度。模块（“应用程序”、[]）。控制器（“控制器”，功能（$scope）{
$scope.tags=[
{标记名：“按钮”，文本：“按钮”}，
{标记名：“div”，文本：“div”}，
{标记名：“span”，文本：“span”}
];
$scope.remove=函数（标记）{
console.log（“删除”，tag.text）；
$scope.tags.splice（$scope.tags.indexOf（tag），1）；
}
}).指令（“自定义”，函数（$compile）{
返回{
限制：“E”，
链接：功能（范围、元素、属性）{
var tag=angular.element（“”）.text（scope.tag.text）；
tag.attr（“ng click”，attr.ngClick）
$compile（tag）（范围）；
元素。追加（标记）；
}
}
});

回答我自己的问题，是的，如果使用

transclude:'element'

，这是可能的。然后angular为

link

函数提供了一个注释DOM元素，该元素稍后用于DOM操作。以下是相关代码：

  return {
    restrict: "E",
    transclude: "element",
    link: function(scope, element, attr) {
      var tag = angular.element("<" + scope.tag.tagName + ">").text(scope.tag.text);

      tag.attr("ng-click", attr.ngClick)

      $compile(tag)(scope);

      element.after(tag); // insert after the comment node
    }

返回{
限制：“E”，
转移：“元素”，
链接：功能（范围、元素、属性）{
var tag=angular.element（“”）.text（scope.tag.text）；
tag.attr（“ng click”，attr.ngClick）
$compile（tag）（范围）；
element.after（tag）；//在注释节点后插入
}

还有一个。

因为CSS规则我无法控制。额外的包装器元素破坏了某些CSS规则（直接后代）。我不需要DOM中的

元素。类似于

replace:true

，它与

link

一起工作。这不应该是一个答案，而是一个注释。

元素.append

的问题中指定的OP可以工作

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.3.x" src="https://code.angularjs.org/1.3.11/angular.js" data-semver="1.3.11"></script>
    <script src="app.js"></script>
  </head>

<body ng-app="app">
  <div ng-controller="controller">
    <h3>Click an element to remove it</h3>
    <custom ng-repeat="tag in tags" ng-click="remove(tag)"></custom>
    <br><br>{{tags}}  
  </div>

  <script>
    angular.module("app", []).controller("controller", function($scope) {
      $scope.tags = [
        { tagName: "button", text: "button" },
        { tagName: "div", text: "div" },
        { tagName: "span", text: "span" }
      ];

      $scope.remove = function(tag) {
        console.log("remove", tag.text);
        $scope.tags.splice($scope.tags.indexOf(tag), 1);
      }
    }).directive("custom", function($compile) {
      return {
        restrict: "E",        
        link: function(scope, element, attr) {
          var tag = angular.element("<" + scope.tag.tagName + ">").text(scope.tag.text);

          tag.attr("ng-click", attr.ngClick)

          $compile(tag)(scope);

          element.append(tag);
        }
      }
    });
  </script>
</body>

</html>

  return {
    restrict: "E",
    transclude: "element",
    link: function(scope, element, attr) {
      var tag = angular.element("<" + scope.tag.tagName + ">").text(scope.tag.text);

      tag.attr("ng-click", attr.ngClick)

      $compile(tag)(scope);

      element.after(tag); // insert after the comment node
    }