在 Vanila JavaScript 函数中转换 Angular 指令

Question

我的问题是如何将我的 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 函数中包装一个指令，然后拉取该函数中的所有参数。

Answer 1

所以对我来说，您正在寻找的是一个接受 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
});

在 Vanila JavaScript 函数中转换 Angular 指令

Transform Angular Directive in Vanila JavaScript function

javascript

directive

angularjs