Question

我想创建一个指令作为一个组件，这样它就不依赖于任何控制器。

我一直试图找出如何定义按钮点击监听器。但是还没有结束。

angular.module('nestedDirectives', [])
.directive("parent", function () {
    function linker(scope, element, attribute, controllers) {
        console.log("linker called");
        element.on("click", function clicked(event) {
            console.log("clicked");
            console.dir(this);
            element.prepend("<h1>Hello</h1>");
        });
    }

    return {
        restrict: 'A',
        template: '<div><h5>An Item</h5><button ng-click="clicked()">Click Me</button></div>',
        link: linker,
        scope: {}
    }
})

在模板中，无论我点击什么，element.on("click")都会被调用。我想在点击按钮时调用clicked()方法。

Here is the Plunker for the same.

Answer 1

link 函数获取范围（在您的情况下是一个独立的范围）作为第一个参数，因此您可以执行以下操作：

.directive("parent", function () {
  function linker(scope, element, attribute, controllers) {
    console.log("linker called");
    //add the "clicked" function to your scope so you can reference with ng-click="clicked" in your template
    scope.clicked = function() {
      console.log("clicked");
      console.dir(this);
      element.prepend("<h1>Hello</h1>");
    };
  }

  return {
    restrict: 'A',
    template: '<div><h5>An Item</h5><button ng-click="clicked()">Click Me</button></div>',
    link: linker,
    scope: {}
  };
});

这是您更新的plunkr http://plnkr.co/edit/7mlcSB4phPO5EdEQqTj0

在angularjs

1 个答案: