当前位置: 首页 > 面试题库 >

AngularJS-如何覆盖指令ngClick

芮安顺
2023-03-14
问题内容

我想覆盖指令ng-click:在每次执行ng-click之前进行一些$ rootscope更改。怎么做?


问题答案:

您不能覆盖AngularJS内置指令。但是,您可以定义多个具有相同名称的指令,并使它们针对同一元素执行。通过priority为指令分配适当的值,您可以控制指令在内置指令之前还是之后运行。

该插件显示了如何构建ng- click在内置指令执行之前执行的指令ng-click。该代码也显示在下面。单击链接时,自定义ng-click将首先运行,然后内置将运行ng- click

index.html

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <script data-require="jquery@1.9.0" data-semver="1.9.0" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.js"></script>
    <script data-require="angular.js@1.0.7" data-semver="1.0.7" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js"></script>
    <script src="script.js"></script>
  </head>

  <body ng-controller="MyCtrl">
    <a ng-click="alert()">Click me</a>
  </body>

</html>

script.js

angular.module('app', [])
  .directive('ngClick', function($rootScope) {
      return {
        restrict: 'A',
        priority: 100, // give it higher priority than built-in ng-click
        link: function(scope, element, attr) {
          element.bind('click', function() {
            // do something with $rootScope here, as your question asks for that
            alert('overridden');
          })
        }
      }
  })
  .controller('MyCtrl', function($scope) {
    $scope.alert = function() {
      alert('built-in!')
    }
  })


 类似资料:
  • 问题内容: 我有一个指令,用于最近重构的表单验证样板。在扩展之前,请允许我进一步解释该指令。 指令用法: 以前,我的指令看起来像这样,并且 有效 。 html模板变得一团糟,我想将按钮包装在模板的“内部”,而不是在按钮之后。因此,我将其重构为我认为更好的指令。 因此,我注意到的是element.html()现在检索templateUrl的内容,而不是我指令的内部HTML的内容。在指令被templa

  • 问题内容: 我目前有量角器安装程序,可以在我们的集成服务器上运行。在protractor.conf.js文件中,我具有以下内容: 从命令行本地运行时,我想覆盖此设置。我尝试了以下失败的尝试 问题: 从命令行本地运行时,如何切换为仅使用chrome的单个实例? 问题答案: 这是个问题。 根据源代码,命令行参数是的别名。 根据文档: 换句话说,由于已指定,因此将被忽略。 您可以尝试从命令行重置: 作为

  • 问题内容: 在完成了一个Web组件项目之后,我将回到AngularJS。我为指令找不到保持其CSS内部(或封装)的正确方法而感到沮丧。 对于Web组件,我没有这个问题,因为已经可以在模板中嵌入样式标签。 AngularJS指令不是这种情况。 到这里为止,我看到的是: 1)在外部文件:my-directive {color:red;}中定义CSS规则,但这不是封装。 2)使用element.css(

  • 问题内容: 我正在尝试Backbone.js,而我正在尝试的事情之一就是调用远程API,因此,据我了解的文档资料,我需要能够覆盖Backbone.sync 。 在文档本身中没有如何执行此操作的示例,并且似乎没有用于Backbone的google组…有人可以指出执行此操作的示例吗? 问题答案: 看看这个带注释的源示例,在该示例中,它们被本地存储替代项覆盖 基本上,Backbone.sync应该是一个

  • 主要内容:AngularJS 指令,AngularJS 实例,数据绑定,AngularJS 实例,重复 HTML 元素,AngularJS 实例,AngularJS 实例,ng-app 指令,ng-init 指令,ng-model 指令,ng-repeat 指令,创建自定义的指令,AngularJS 实例,限制使用AngularJS 通过被称为 指令 的新属性来扩展 HTML。 AngularJS 通过内置的指令来为应用添加功能。 AngularJS 允许你自定义指令。 AngularJS 指令

  • 问题内容: 我喜欢使用指令制作自定义组件。我检查了很多教程,它使我感到困惑,任何人都可以解释指令的工作原理。我计划制造的组件是 呼喊列表的模板将像这样 问题答案: 这是您的指令,带有一些内联注释: 和模板文件: 现在,您可以在代码中使用它,如下所示: 控制器: 视图: 希望这可以帮助!