Трансформация угловой директивы в Ваниле Функция JavaScript

Question

Моя проблема заключается в том, как перенести мою Угловую директиву на функцию 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'); 
     }); 
    } 
    }; 
}); 
} 

Так что я хотел бы, чтобы обернуть директиву в яваскрипте функции, тянуть все параметры этой функции.

Answer 1

Так что для меня это выглядит так, как будто вы ищете функцию, которая принимает элемент DOM и применяет изменения к id (манипуляция DOM, стиль или что-то еще). То, что делает угловая директива, - это не что иное, как перенос изменений в дом в контейнер.

Если вы не хотите использовать angular.js для своего кода, я думаю, что наилучшим вариантом будет jQuery для того, чего вы хотите достичь. Фактически, что используется директива, это облегченная версия jQuery.

Что следует сделать трюк для вас принять все из ссылки функции и заменить элем с объектом 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 
});