Question

好的，我一定是想念一些简单的东西。我正在制作一个有角度的应用程序，我想实现一些谷歌分析表格观看代码，所以我想要像

(function($) {
  $(document).ready(function() { 
     $(':input').blur(function () {
        if($(this).val().length > 0) {
          _gaq.push(['_trackEvent', 'INSERT FORM NAME HERE', 'completed',   $(this).attr('name')]);
        } 
        else {
           _gaq.push(['_trackEvent', 'INSERT FORM NAME HERE', 'skipped', $(this).attr('name')]);
     });
  });
})(jQuery);

请参阅here

我希望在每个单独的表单输入中使用类似的东西而不是指令。这样可以将其保存在一个地方，以便将其删除或以后再进行。

但是，此代码永远不会触发。我正在使用ng-includes作为表单的一部分，因此它听起来像传统的document.ready附加jquery事件监听器的方式将不再起作用，因为它在包含这些部分之前触发。

我还在顶级表单元素上尝试了一个指令，如下所示：

angular.module('ngPayment2App')
 .directive('formTracker', function () {
   return {
    restrict: 'E',
    link: function postLink(scope, element, attrs) {
      element.find(':input').on('blur',function(){
        console.log('finally!')
      })
    }
  };
});

'终于'永远不会表现出来。

任何人都有任何想法。我知道我正在做一个菜鸟的错误，我只是不知道它到底是什么......

Answer 1

您的指令（当前编写的方式）仅在您的应用中包含jQuery时才有效。

Working JSFiddle

这是因为AngularJS仅附带jQuery lite，因此find()仅接受元素，例如input, p, div所以如果没有应用程序中包含的jQuery，伪类选择器（就像你在:input中使用的那样）将无法工作。这是通过在AngularJS引用之前向jQuery添加脚本引用来完成的。此外，jqLite的on()函数不支持事件数据。您应该可以使用bind()代替（假设您没有动态加载内容）。

angular.module('myApp', [])
.controller("MyCtrl", function ($scope) {})
.directive('formTracker', function ($timeout) {
    return {
        restrict: 'E',
        link: function postLink(scope, element, attrs) {
            // Requires jQuery
            element.on('blur', ':input', function () {
                console.log('finally!');
            });

            // Timeout added for display purpose only
            // Wait 3 seconds and add a new HTML input
            $timeout(function(){
                element.append('<br><span>Element added after DOM has finished rendering</span><br><input id="dynamic-element" name="dynamic-elemen" type="text">');
            }, 3000);

        }
    };
});

angularjs添加简单的jquery事件监听器

1 个答案: