Question

我正在尝试在我的应用中添加自定义指令。但是没有按下按钮点击事件。

我的控制器 -

appServices.directive('customClick', function() {
  return {
    restrict: 'E',
    require: 'ngModel',
    link: function($scope, element, attrs) {
            $scope.deleteFieldMap = function() {
              alert('inside click');
            }
          }
  }
}

我的jsp -

<button custom-click class="btn btn-danger btn-sm" 
                     data-style="zoom-in"
                     ng-click="deleteFieldMap(editProductJob,$index)" 
                     name="jobFileKey"
                     title="Delete" >
    <span class="glyphicon glyphicon-remove"></span>
</button>

我在这里做错了什么？

Answer 1

您的指令仅限于“E”。这意味着“元素”。

您应将其更改为“A”，因为您希望将其更改为“属性”。

查看参考文档：

https://docs.angularjs.org/guide/directive

编辑：正如Medet所解释的那样，你也错过了元素中的“ng-model”。如果他是不必要的，删除定义，或者如果你真的希望它添加属性。此致

Answer 2

如上所述的第一个问题是element.restrict: 'A'，秒问题 - 您的按钮必须具有ng-model属性，以下演示

angular.module('app', [])
  .run(function($rootScope) {
    $rootScope.test = '123qe';
  }).directive('customClick', function() {
    return {
      restrict: 'A',
      require: 'ngModel',
      link: function($scope, element, attrs, ngModelCtrl) {
        $scope.deleteFieldMap = function() {
          alert('inside click' + ngModelCtrl.$viewValue);
        }
      }
    }
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.js"></script>

<div ng-app="app">
  <button custom-click ng-click="deleteFieldMap(editProductJob,$index)" ng-model="test">
    remove
  </button>
</div>

Answer 3

您应该使用自定义指令，如下所示：

<custom-click class="btn btn-danger btn-sm" 
              data-style="zoom-in"
              ng-click="deleteFieldMap(editProductJob,$index)"
              name="jobFileKey"
              title="Delete" >
    <span class="glyphicon glyphicon-remove"></span>
</custom-click>

作为元素！

Angular.js：自定义指令

3 个答案: