javascript - 在 Angular-js 指令的链接函数中编写指令

Question

我在 angular.js 中定义了一个指令。该指令有一个链接函数和一个 Controller 函数，并且没有模板，因此所有 View 都是在链接函数中生成的。在链接函数中我正在执行以下操作:

var button=angular.element("<a>");
button.addClass("ng-click: previousLink();");

//previousLink() is a function defined in the scope.
//I am doing it like that, because before that one I attempted to do:
//button.prop("ng-click", "previousLink()");
//button.text("Previous");
//but for some reason it was showing on html as <a>Next</a>, without adding the property.

它不起作用。如果我点击按钮，它什么也不做。如果我不是在代码中的链接函数中执行此操作，而是使用模板执行此操作，那么它会起作用。由于某种原因，我需要在链接函数中使用 jquery 进行一些操作。我应该怎么办？无论如何，有没有办法让这项工作正常进行，或者我必须同时使用模板和链接功能并在那里组合内容？

Answer 1

要使用$compile，您需要遵循现有代码，例如:

$compile(button.contents())(scope);

如果您希望它是动态的，您可以将其放入 $watch 中，如下所示:

link: function (scope, ele, attrs) {
  scope.$watch(attrs.yourval, function(html) {
    var button=angular.element("<a>");
    button.addClass("ng-click: previousLink();");
    $compile(button.contents())(scope);
  });
}

$compile 将范围(作为参数提供)附加到您定义的 html 中。这将使您的按钮点击正常工作。