附加文本而不是警报 ID

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

append text instead of alert ID

angularjs

angularjs-directive

The DEMO