Question

我正在尝试开发一个指令，其中我必须有一个可点击的按钮，点击会触发控制器功能。

这是我的代码

'use strict';

/*global d3:false */

angular.module('myApp').directive('legends', function() {
return {
  restrict: 'E',
  scope: {
    service: '=',
    buttonClick :  '&'
  },
  replace: true,

  link: function(scope, element, attrs) {

    function main(data) {
      var format = d3.time.format('%d %b %y'),
        str = '<div>'+
        '<div>'+
        '<span>A</span>'+
        '<span>' + format(data[0]) + '</span>'+
        '<span>'+ data[1].toFixed(2) +'</span></div>'+
        '<div>'+
        '<span ng-click="buttonClick()"></span>'+
        '</div>'+
        '<div>'+
        '<span>B</span>'+
        '<span>' + format(data[2]) + '</span>'+
        '<span>'+ data[3].toFixed(2) +'</span></div></div>';
      element.html(str);
    }

    //*********************************************************************
    scope.$watchCollection('service', function(data) {
      if (!angular.isUndefined(data) && data.length === 4) {
        main(data);

      }          
    });
  }

};

}）;

我在另一篇文章中读到，我必须将函数的引用作为属性传递，这就是我所做的，但仍然没有触发。

Ctrl：

angular.module('myApp')
.controller('ctrl',
    function() {
        $scope.switchObjects = function() {
          console.log('done');
        }
    }
);

谢谢大家：）

Answer 1

我可能会遗漏一些内容，但在您的指令中，您的函数名为buttonClick()并且在您的控制器switchObjects中。

Answer 2

您需要先编译HTML字符串，然后再将其注入元素。

请改为：

.directive('myCustomer', function() {

  function postlink(scope, elem, attrs) {
       scope.buttonClick = function() {
           console.log("Button clicked");
       }
  }

  return {
    link: postlink,
    template: '<html>PUT HTML HERE</html>'
  };
});

ng-click在指令中不起作用

2 个答案: