Question

我的问题是如何将我的Angular Directive转换为JavaScript函数。 Ben现在正在寻找一个弱者，但没有任何成功。

由于我与雇主签订了保密协议，因此无法分享我的任何代码，但我认为这个问题很容易理解。

任何人都可以给我一些建议吗？

这是一个简单的例子，我试着清楚一下初学者可以。

这是一个指令：

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函数中包装一个指令，拉动该函数中的所有参数。

Answer 1

所以对我来说，看起来你正在寻找的是一个接受DOM元素并将更改应用于id（DOM操作，样式或其他东西）的函数。角度指令的作用，只不过是将dom更改为容器。

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

你需要做的就是从链接函数中取出所有内容，并将 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
});

在Vanila JavaScript函数中转换Angular Directive

1 个答案: