Question

使用AngularJS创建了一个指令。该指令显示运行时（动态）控件，但它不会触发来自控制器的事件。任何人都可以帮助我。

注意：也在指令中使用了编译。

下面给出了plnkr链接。

module.controller('controllerOne', ['$scope', function ($scope) {


    $scope.AddClickButton = function () {
        alert("Button Clicked");
    };


}]);

module.directive('directiveOne', ['$compile', function ($compile) {
    return {
        restrict: 'E',

        scope: {

            data: '='
        },

        link: function ($scope, $element, $attrs) {

            var btnhtml = '<button type="button" ng-click="AddClickButton()">Click Me</button>';
            var temp = $compile(btnhtml)($scope);

            $element.append(temp);

        }
    };
}]);

HTML

<form name="form1" >

    <directive-one data="dataOne"></directive-one>

</form>

Plunkr

Answer 1

您应该使用AddClickButton（表达式绑定）将&方法引用传递给指令，因为指令一直使用隔离范围。因此它不直接了解父作用域。

<强>标记

<form name="form1" >

<directive-one data="dataOne" click-action="AddClickButton()"></directive-one>

然后使用clickAction isoalted scope prop。

从指令调用该方法

<强>指令

module.directive('directiveOne', ['$compile', function($compile) {
  return {
    restrict: 'E',

    scope: {
      data: '=',
      clickAction: '&'
    },
    link: function($scope, $element, $attrs) {
      var btnhtml = '<button type="button" ng-click="clickAction()">Click Me</button>';
      var temp = $compile(btnhtml)($scope);
      $element.append(temp);
    }
  };
}]);

Forked Plunkr

Answer 2

您可以使用此版本http://plnkr.co/edit/9QCpAQUhOKZ3NtU1rfhY

link: function ($scope, $element, $attrs) {
      $scope.AddClickButton = function() {
         alert($scope.text);
      }
    }

并从控制器中删除该功能

事件不会触发angularjs指令中的运行时控件

2 个答案: