Question

我的问题是需要在事件调用时用指令替换html元素。所以我在我的控制器中调用click事件中的函数并将angular元素附加到所需的位置，该angular元素是一个指令，所以我需要做一些事情来使它可以被识别为指令。我尝试过$ compile但是在控制器级别不起作用。

我的控制器代码

angular.element(document.body).append("<annotation></annotation> ");

我的指令代码

app.directive("annotation", function($compile){

var linker = function(scope,element, attrs){
    element.html("Done "+attrs.content);

    if(attrs.content){

        $(element).tooltipster({
            content: $("<button class=\"btn btn-primary\">Highlight</button>"),
            animation: 'fade',
            delay: 200,
            interactive: true,
            theme: 'tooltipster-default',
            touchDevices: false,
            trigger: 'hover'
          });
    }

    $compile(element)(attrs);
}

return {
    restrict : "E",
    template: '<div class="highlightor"></div>',
    replace : true,
    link : linker,
    scope: {
        content: "="
    }
};

}）;

Answer 1

更新：：类似于此的内容可能会有效：

.controller('myController', ['$scope', '$compile', function ($scope, $compile) {
    $scope.onClick = function () {
        angular.element(document.body).append(
                $compile("<annotation></annotation>")($scope)
        );
    };
}]);

通过将$compile注入控制器然后在其中进行DOM操作，可以以您想要的方式工作。但是，这不是正确的做法，而是蔑视Zen of Angular的规则之一。

不要在Controller中进行DOM操作。

Correct Way（TM），IMO，将点击更改为控制器中$scope的布尔标志，然后使用该布尔标志在模板之间切换：

<强>模板：

<div ng-if="!annotationVisible" ng-click="showAnnotation()">
    Click here to see annotations.
</div>
<div ng-if="annotationVisible"><annotation></annotation></div>

<强>控制器：

$scope.annotationVisible = false;
$scope.showAnnotation = function () { $scope.annotationVisible = true; };

从控制器注入角度元素但不作为指令工作

1 个答案: