The DEMO

Question

过去几天我一直在阅读有关$ compile的内容以及我现在想要做什么，而不是显示如何附加一些基本文本的警告？

vgApp.directive('part', ['$compile', function($compile) {
    return {
        restrict: 'AE',
        scope: true,
        template:'<div>the infor for each state</div>'
        link: function(scope, element, attrs) {
            scope.elementId = element.attr("id");
            scope.partClick = function() {
                alert(scope.elementId);
                element.append("some text here");
                $compile(element)(scope);
            };
            element.attr("ng-click", "regionClick()");
            element.removeAttr("part");
            $compile(element)(scope);
        }
    }
]);

Answer 1

在您的示例中，您正在编译指令元素。您可能会以这种方式获得意外行为，尤其是您要删除作为定义属性的attr'part'。我不知道对此会有什么期待，但它看起来有些可怕。我使用compile来创建新元素，使用Angular将其挂钩并将其附加到包含元素，如下所示：

var popTpl = '<pop-it class="active CLASS_NAME no-ng-class="edtme|checkActive"></pop-it>'
            .replace('CLASS_NAME', cls);
popEl = $compile(angular.element(popTpl))($scope);
element.append(popEl);

注意：pop-it是一个指令。希望它有所帮助。

Answer 2

它的价值在于，这是在没有$compile的情况下编写的指令：

The DEMO

angular.module("app",[])
.directive('part', ['$compile', function($compile) {
    return {
        restrict: 'AE',
        scope: true,
        template:'<div>the infor for each state</div>',
        link: function(scope, element, attrs) {
            //scope.elementId = element.attr("id");
            scope.elementId = attrs.id;
            scope.partClick = function() {
                alert(scope.elementId);
                element.append("some text here");
                //$compile(element)(scope);
            };
            //element.attr("ng-click", "regionClick()");
            element.on("click", function (event) {
              scope.partClick();
              scope.$apply();
            });
            //element.removeAttr("part");
            //$compile(element)(scope);
        }
    };
}])

.part {
  cursor: pointer;
}
.part:hover {
  border: 2px green;
  background-color: yellow;
}

<script src="//unpkg.com/angular/angular.js"></script>
  <body ng-app="app">
    <h1>Directive Example</h1>
    <div part id="part00" class="part">
    </div>
  </body>

附加文本而不是警报ID

2 个答案:

The DEMO