在JavaScript函数中转换Angular指令

Transform Angular Directive in Vanila JavaScript function

本文关键字：Angular 指令 转换 JavaScript 函数      更新时间：2023-09-26

我的问题是如何将我的Angular指令转换为JavaScript函数。

由于我和我的雇主有保密协议，我不能分享我的任何代码，但我认为这个问题很容易理解。

谁能给我一些建议?

这是一个简单的例子，我会尽量像初学者一样清楚。

这是一个指令:

app.directive('helloWorld', function() {
  return {
    restrict: 'AE',
    replace: true,
    template: '<p style="background-color:{{color}}">Hello World',
    link: function(scope, elem, attrs) {
      elem.bind('click', function() {
        elem.css('background-color', 'white');
        scope.$apply(function() {
          scope.color = "white";
        });
      });
      elem.bind('mouseover', function() {
        elem.css('cursor', 'pointer');
      });
    }
  };
});

我想做的是这样的:

function directiveWraper(scope, elem, attrs){
app.directive('helloWorld', function() {
  return {
    restrict: 'AE',
    replace: true,
    template: '<p style="background-color:{{color}}">Hello World',
    link: function(scope, elem, attrs) {
      elem.bind('click', function() {
        elem.css('background-color', 'white');
        scope.$apply(function() {
          scope.color = "white";
        });
      });
      elem.bind('mouseover', function() {
        elem.css('cursor', 'pointer');
      });
    }
  };
});
}

所以我想在javascript函数中包装一个指令，并拉出该函数中的所有参数。

所以对我来说，看起来你正在寻找的是一个函数，它需要一个DOM元素，并应用更改id (DOM操作，风格或其他东西)。angular指令所做的，不过是把dom的改动封装到一个容器中。

如果你不想为你的代码使用angular.js，我想最合适的将是jQuery你想要实现的。实际上，这个指令使用的是jQuery的一个轻量级版本。

应该为您做的是将link函数中的所有内容取出，并将elem替换为像这样的jQuery对象:

var $elem = $(".myclass");
$elem.bind('click', function() {
    $elem.css('background-color', 'white');
    //do something else onclick
});
$elem.bind('mouseover', function() {
    $elem.css('cursor', 'pointer');
});

你可能需要做更多的改变，但这应该会引导你走上正确的轨道。此外，您可能希望在文档加载后调用此代码，以确保您正在查找的元素位于DOM上。

$.ready(function(){
     //..do stuff in here after the document.ready event fired
});
相关文章：