个人中心
gpt4 book ai didi

javascript - 如何在 AngularJS 中观察自定义事件？

转载 作者：可可西里 更新时间：2023-11-01 01:42:24 24 4
gpt4 key购买 nike

简单示例:我有一个文本区域并想为其提供额外的行为:在 enter 键上做一些事情，然后在 shift + enter 上转到下一行

我想我应该提供额外的指令来添加该行为。我已经这样做了:http://jsbin.com/oruvuy/1/edit

附言一件 hackie 事情对我来说似乎很奇怪:我手动调用 $digest()。可以吗？有什么想法吗？

JS:

angular.module('Chat', [])
  .directive('enterSubmit', function () {
    return {
      restrict: 'A',
      link: function (scope, element, attrs) {
        var submit;

        $(element).on({
          keydown: function (e) {
            submit = false;

            if (e.which === 13 && !e.shiftKey) {
              submit = true;
              e.preventDefault();
            }
          },

          keyup: function () {
            if (submit) {
              scope.$eval( attrs.enterSubmit );

              // flush model changes manually
              scope.$digest();
            }
          }
        });
      }
    };
  });

function ChatCtrl($scope) {
  $scope.messages = [{
    text: 'Sample Message',
    datetime: new Date()
  }];

  $scope.add = function () {
    $scope.messages.push({
      text: $scope.message,
      datetime: new Date()
    });
    $scope.message = '';
  };

  $scope.message = '';
}
<body ng-controller="ChatCtrl">

  <h1>Leave message:</h1>
  <form>
    <div class='hint'>Click &lt;Enter&gt; to submit :)</div>
    <textarea
      cols="30"
      rows="5"
      ng-model="message"
      enter-submit='add()'
    ></textarea>
    <br />
    <button type="submit" ng-click="add()">Send message!</button>
  </form>

  <h3>Messages list:</h3>
  <table>
    <tr>
      <th>Text</th>
      <th>Date</th>
    </tr>
    <tr ng-repeat="message in messages">
      <td class='text'>{{message.text}}</td>
      <td class='date'>{{message.datetime | date:"HH:mm:ss"}}</td>
    </tr>
  </table>

</body>

但这是正确的做法吗？

最佳答案

是的，在指令的链接函数中绑定(bind)事件正是您想要做的。

调用 $digest 不是 hacky - 你示例中的消息被添加到 keyup 上的模型中，并且 Angular 不会消化这些更改，直到有人告诉它。它实际上会在下一个 keydown 时被消化，但由于您需要在 keyup 之后发生 $digest，因此您必须手动调用它。

关于javascript - 如何在 AngularJS 中观察自定义事件？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14925728/

24 4 0
文章推荐： ios - Swift:使用 evaluateJavascript
文章推荐： java - 如何通过类类型委托(delegate)构造函数的实例化？
文章推荐： ios - Swift 从永远不应该返回 nil 的 NSNotification() 实例化中返回 nil
文章推荐： Java I/O - 模拟 System.console() 的输入
可可西里
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com