Javascript 未定义指令的AngularJS链接函数_Javascript_Angularjs

Javascript 未定义指令的AngularJS链接函数

javascript angularjs

Javascript 未定义指令的AngularJS链接函数,javascript,angularjs,Javascript,Angularjs,我正试图按照这个链接中的教程构建一个简单的指令：（我想是幻灯片11和12，没有编号）因为它只显示JavaScript部分和HTML部分的一小部分（仅显示文本输入）。我制作了自己的html页面，如下所示： <!DOCTYPE html> <html> <head> <title>Directives</title> <script src="Scripts/angular.min.js">

我正试图按照这个链接中的教程构建一个简单的指令：（我想是幻灯片11和12，没有编号）

因为它只显示JavaScript部分和HTML部分的一小部分（仅显示文本输入）。我制作了自己的html页面，如下所示：

<!DOCTYPE html>
  <html>
    <head>
      <title>Directives</title>
      <script src="Scripts/angular.min.js"></script>
      <script src="Scripts/angular-route.min.js"></script>
      <script src="Scripts/app.js"></script>
    </head>
    <body ng-app="MyDirectives" ng-controller="DirectivesController">
     <input type="text" select-all-on-focus />
    </body>
</html>

Chrome控制台上出现的错误是：

TypeError:undefined不是函数在linkFn 在J 在f 在J 在f 在在在h$get.h$eval时在h.$get.h.$apply http://

链接功能似乎有问题

为什么要命名链接函数？只需传递一个匿名函数

link: function (scope, element, attrs) {
   //...
}

但代码的问题是，在使用angular.element时，您可以使用什么。它是jQuery Lite的am实现，不允许您访问所有方法

因此，要绑定事件侦听器，您需要使用

element.on('mousedown', function() {
  //...
}

这是angular.element

AngularJS的jqLite实现没有用于单击、鼠标点击等的友好方法。您应该使用。在：

myModule.directive('selectAllOnFocus', function () {
    return {
        restrict: 'A', 
        link: function(scope, element, attrs) {
            element.on("mouseup", function (event) {
              alert("Lost focus!");
              event.preventDefault();
            });
            element.on("focus", function () {
              element.select();
              alert("Focused!");
            });
        }
      }
});

本教程按照Dave Smith给出的方法运行，但需要JQuery。见普朗克

如果您在检查angular.element文档您将看到mouseup（）在JQLite中不可用

angular.module('myApp.directives',[])

.directive('selectAllOnFocus', function($timeout) {
  return {
    restrict: 'A',
    link: function(scope, element) {
      element.mouseup(function(event) {
        event.preventDefault();
      });
      element.focus(function() {
        element.select();
      });
    }
  }
})

您不需要命名链接函数<代码>链接：函数（作用域、元素、属性）仍将不起作用，错误相同。是否有可能在

mouseup

上未定义函数？您将指令定义为a（属性）。这就是mouseup/focus函数不起作用的原因，它与错误无关，命名函数是个好主意。（事实上，Angular的所有内联函数都是命名的，它对调试、评测等非常有帮助。）你认为，一旦你打开DevTools，尝试调试一些奇怪的问题，或者评测你的应用程序，或者使用Batarang或…嗯，现在没有错误，但显然在“focus”事件上没有select（）函数（select（）上的未定义错误）。Mouseup事件未在另一侧执行（如果我没有弄错的话，应该在我失去焦点时执行？）。不过，这些都是其他本质的问题，所以我想问题已经解决了。谢谢！@RosenDimov Yup，只需要链接事件，而不是使用警报！谢谢你的提醒，我只有一个问题-为什么这个.select（）有效，而元素.select（）无效？是这个吗。select（）AngularJS？@RosenDimov中选择输入的方法与AngularJS不提供快捷方式的问题相同。

this.select（）

不是使用jQuery，而是使用默认浏览器的

select（）

方法。

angular.module('myApp.directives',[])

.directive('selectAllOnFocus', function($timeout) {
  return {
    restrict: 'A',
    link: function(scope, element) {
      element.mouseup(function(event) {
        event.preventDefault();
      });
      element.focus(function() {
        element.select();
      });
    }
  }
})