Question

永远不会触发与ng-click事件关联的功能。 ng-click位于使用$ compile引导的指令中。有人知道为什么click事件永远不会触发吗？该功能在示波器上可见。提供了working plunker。代码如下：

var app = angular.module('plunker', ['ui.bootstrap']);

app.controller('MainCtrl', function($scope) {
  $scope.datum = new Date('2015-05-01');
});

var link = function($compile) {
  return function(scope, element, attributes, form) {

    scope.opened = false;

    var tag = '<span class="input-group-btn">' +
      '<button type="button" class="btn btn-default" ng-click="open($event)">' +
      '<i class="glyphicon glyphicon-calendar"></i>' +
      '</button>' +
      '</span>';

    console.log(scope.opened)

    element
      .removeAttr('szp-date')
      .attr('datepicker-popup', "")
      .attr('is-open', "opened")
      .wrap('<p class="input-group" style="width: 10em"></p>')
      .after(tag);

    $compile(element)(scope);

  };
};

var forminput = function($compile) {

  return {
    restrict: "A",
    require: "^form",
    controller: function($scope) {
      $scope.open = function($event) {
        // This never gets fired
        $event.preventDefault();
        $event.stopPropagation();

        $scope.opened = true;
        console.log(scope.opened);
      };
    },
    link: link($compile)
  };

};

app.directive("szpDate", forminput);

修改有趣的是，修改输入标签如下：

 element
     .removeAttr('szp-date')
     .attr('datepicker-popup',"")
     .attr('is-open', "opened")
     // added this line of code
     .attr('ng-click', 'open($event)')
     .wrap('<p class="input-group" style="width: 10em"></p>')
     .after(tag);

生成一个可点击的输入元素，但这不是我想要实现的。我希望按钮可以点击。

编辑2：

更有趣的是，如果我修改这一行，我似乎已经开始工作了。

.after(tag)

与

.after($compile(tag)(scope));

ng-click in编译指令不起作用

0 个答案: