文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >ng-click="someFunction“作为ng-click=”

问ng-click="someFunction“作为ng-click=”
EN

Stack Overflow用户
提问于 2019-08-05 07:10:24
回答 1查看 60关注 0票数 0

我有以下HTML元素：

代码语言：javascript
复制
<re-button btn-type="primary" 
    re-permission="UpdateMaintenanceRequest" 
    ng-disabled="isSending || !model.IsCompanyEmailValid || !validSelection || sendEmailForm.ccEmail.$invalid" 
    ng-click="formOptions.save()" 
    id="send"
    ng-show="model.EmailType != 'QuoteRequestOwnerApproval'" 
    text="Send">
</re-button>

但是，当我检查Chrome中的元素时，它的结果是：

代码语言：javascript
复制
<button class="btn no-transition btn-primary 
    ng-scope" btn-type="primary" 
    re-permission="UpdateMaintenanceRequest" 
    ng-disabled="checkDisabled()" 
    ng-click="" 
    id="send" 
    ng-show="model.EmailType != 'QuoteRequestOwnerApproval'" 
    text="Send" type="button">Send
</button>

为什么按钮HTML代码如此不同？

如果是ng-click=""，怎么可能还在调用$scope.sendEmail() (我使用了一个断点来确保它被调用)。

我不是Javascript专家，但这与以下代码有关吗？

代码语言：javascript
复制
$scope.formOptions = {
    beforeSave:function(callback){
        var selected = _.filter($scope.model.EmailContacts, {IsSending:true});
        if(selected && selected.length > 0)
            callback(true);
        else{
            callback(false);
        }
    },
    resource: function () {
        if ($scope.model.EmailType != $scope.emailTypeEnum.QuoteRequestOwnerApproval.Name) {
            return $scope.sendEmail();
        }
        else {
            return $scope.previewEmail();
        }
    }
};

编辑：

下面是reButton指令：

代码语言：javascript
复制
(function() {
    'use strict';

    angular.module('app.components')
        .directive('reButton', directiveFn);

    //directiveFn.$inject = ['context'];
    function directiveFn() {
        var directive = {
            restrict:'E',
            priority:100,
            scope:true,
            replace:true,
            template: '<button class="btn no-transition" />',
            compile:compileFn
        };
        return directive;

        function compileFn(tEle, tAttrs) {
            init();
            return postLinkFn;

            function init() {

                if (tAttrs.btnSize && tAttrs.btnSize !== '') {
                    tEle.addClass('btn-' + tAttrs.btnSize);
                }

                if (tAttrs.type) {
                    tEle.attr('type', tAttrs.type);
                } else {
                    tEle.attr('type', 'button');
                }

                if (tAttrs.btnType.indexOf('icon') < 0) {
                    if (tAttrs.text && tAttrs.text !== '') {
                        tEle.html(tAttrs.text);
                    }
                    else {
                        throw new Error('required text');
                    }
                } 
                else {
                    if (tAttrs.iconType === '' || !angular.isDefined(tAttrs.iconType)) {
                        throw new Error('Please provide icon type');
                    }
                }

                if (tAttrs.btnType) {

                    //if the icon attribute is not set then no need to put an icon html 
                    var iconTemplate = null;
                    if(tAttrs.iconType)
                    {
                        iconTemplate = '<span class="fa ' + tAttrs.iconType + '"></span>';
                        if (tAttrs.iconType && tAttrs.iconType.indexOf('icon-pt') >= 0) 
                        {
                            iconTemplate = '<span class="' + tAttrs.iconType + '"></span>';
                        }
                    }

                    switch (tAttrs.btnType) {
                        case 'primary':
                            tEle.addClass('btn-primary');
                            $(tEle).prepend(iconTemplate?(iconTemplate + '&nbsp;&nbsp;'):'');
                            break;
                        case 'link':
                            tEle.addClass('btn-link');
                            break;
                        case 'secondary':
                            tEle.addClass('btn-secondary');
                            break;
                        case 'cancel':
                            tEle.addClass('btn-cancel');
                            break;
                        case 'card-icon':
                            tEle.addClass('btn-icon card-icon');
                            $(tEle).html(iconTemplate);
                            break;
                        case 'content-icon':
                            tEle.addClass('btn-icon content-icon');
                            $(tEle).html(iconTemplate);
                            break;
                        case 'grid-icon':
                            tEle.addClass('btn-icon grid-icon');
                            $(tEle).html(iconTemplate);
                            break;
                        case 'page-icon':
                            tEle.addClass('btn-icon page-icon');
                            $(tEle).html(iconTemplate);
                            break;
                        case 'link-icon':
                            tEle.addClass('btn-icon link-icon');
                            $(tEle).html(iconTemplate);
                            break;
                        case 'modal-icon':
                            tEle.addClass('btn-icon modal-icon');
                            $(tEle).html(iconTemplate);
                            break;
                        case 'btn-icon-prepend':
                            tEle.addClass('btn-default btn-icon-prepend');
                            tEle.html($('<span></span>').html(tAttrs.text));
                            $(tEle).prepend(iconTemplate?(iconTemplate + '&nbsp;&nbsp;&nbsp;'):'');
                            break;
                        default:
                            tEle.addClass('btn-default');
                            $(tEle).prepend(iconTemplate?(iconTemplate + '&nbsp;&nbsp;&nbsp;'):'');
                            break;
                    }
                }
                else {
                    throw new Error('require button type');
                }
            }

            function postLinkFn(scope, ele, attr) {
                var oriTitle = attr.title;
                attr.$observe('disabled', function(val) {
                    var titleDisabled = attr.titleDisabled;
                    if (val && titleDisabled) {
                        ele.attr('title', titleDisabled);
                    } else {
                        ele.attr('title', oriTitle);
                    }
                });
            }
        }
    }

})();
angularjs
javascript
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-08-05 09:09:15

我认为问题可能是由于scope在AngularJS指令中的误解或误用造成的。您的指令有它自己的独立范围。您可以使用&运算符，它允许您计算指令的父作用域上的表达式。这基本上允许您创建指令的新属性，该属性将用于指定要调用的函数。

下面是一个示例，使用您发布的指令代码。注意指令代码中对scope和template的更改，以及click-me属性在re-button元素上的添加。

​

代码语言：javascript
复制
var app = angular.module("myApp", []);

app.controller("MainController", function($scope) {
  $scope.save = function() {
    console.log("SAVE!");
  };
});

angular.module('myApp')
  .directive('reButton', function() {
    return {
      restrict: 'E',
      priority: 100,
      scope: {
        "clickMe": "&"
      },
      replace: true,
      template: '<button ng-click="clickMe()" class="btn no-transition" />',
      compile: compileFn,
    }
  });

function compileFn(tEle, tAttrs) {
  init();
  return postLinkFn;

  function init() {

    if (tAttrs.btnSize && tAttrs.btnSize !== '') {
      tEle.addClass('btn-' + tAttrs.btnSize);
    }

    if (tAttrs.type) {
      tEle.attr('type', tAttrs.type);
    } else {
      tEle.attr('type', 'button');
    }

    if (tAttrs.btnType.indexOf('icon') < 0) {
      if (tAttrs.text && tAttrs.text !== '') {
        tEle.html(tAttrs.text);
      } else {
        throw new Error('required text');
      }
    } else {
      if (tAttrs.iconType === '' || !angular.isDefined(tAttrs.iconType)) {
        throw new Error('Please provide icon type');
      }
    }

    if (tAttrs.btnType) {

      //if the icon attribute is not set then no need to put an icon html 
      var iconTemplate = null;
      if (tAttrs.iconType) {
        iconTemplate = '<span class="fa ' + tAttrs.iconType + '"></span>';
        if (tAttrs.iconType && tAttrs.iconType.indexOf('icon-pt') >= 0) {
          iconTemplate = '<span class="' + tAttrs.iconType + '"></span>';
        }
      }

      switch (tAttrs.btnType) {
        case 'primary':
          tEle.addClass('btn-primary');
          $(tEle).prepend(iconTemplate ? (iconTemplate + '&nbsp;&nbsp;') : '');
          break;
        case 'link':
          tEle.addClass('btn-link');
          break;
        case 'secondary':
          tEle.addClass('btn-secondary');
          break;
        case 'cancel':
          tEle.addClass('btn-cancel');
          break;
        case 'card-icon':
          tEle.addClass('btn-icon card-icon');
          $(tEle).html(iconTemplate);
          break;
        case 'content-icon':
          tEle.addClass('btn-icon content-icon');
          $(tEle).html(iconTemplate);
          break;
        case 'grid-icon':
          tEle.addClass('btn-icon grid-icon');
          $(tEle).html(iconTemplate);
          break;
        case 'page-icon':
          tEle.addClass('btn-icon page-icon');
          $(tEle).html(iconTemplate);
          break;
        case 'link-icon':
          tEle.addClass('btn-icon link-icon');
          $(tEle).html(iconTemplate);
          break;
        case 'modal-icon':
          tEle.addClass('btn-icon modal-icon');
          $(tEle).html(iconTemplate);
          break;
        case 'btn-icon-prepend':
          tEle.addClass('btn-default btn-icon-prepend');
          tEle.html($('<span></span>').html(tAttrs.text));
          $(tEle).prepend(iconTemplate ? (iconTemplate + '&nbsp;&nbsp;&nbsp;') : '');
          break;
        default:
          tEle.addClass('btn-default');
          $(tEle).prepend(iconTemplate ? (iconTemplate + '&nbsp;&nbsp;&nbsp;') : '');
          break;
      }
    } else {
      throw new Error('require button type');
    }
  }

  function postLinkFn(scope, ele, attr) {
    var oriTitle = attr.title;
    attr.$observe('disabled', function(val) {
      var titleDisabled = attr.titleDisabled;
      if (val && titleDisabled) {
        ele.attr('title', titleDisabled);
      } else {
        ele.attr('title', oriTitle);
      }
    });
  }
}
代码语言：javascript
复制
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="MainController">
    <re-button btn-type="primary" click-me="save()" id="send" text="Send"></re-button>
  </div>
</div>

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/57353735

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档