Написание jQuery или Javascript внутри Angular для расширения функциональности

Question

Написание jQuery или Javascript внутри Angular для расширения функциональности

0

Построение Угловое приложение для обработки некоторой пользовательской логики URL, но я не уверен, как я построил бы это в угловой.

У меня есть два jsfiddles, в которые я буду включать исходный код.

<select class="kv">
<!-- ngRepeat: n in get.evoltage --><option ng-repeat="n in get.evoltage" class="ng-binding ng-scope" value="230">230</option><!-- end ngRepeat: n in get.evoltage --><option ng-repeat="n in get.evoltage" class="ng-binding ng-scope" value="460">460</option><!-- end ngRepeat: n in get.evoltage -->
</select>

<select class="khp">
    <!-- ngRepeat: n in get.ehp --><option ng-repeat="n in get.ehp" class="ng-binding ng-scope" value="20">20</option><!-- end ngRepeat: n in get.ehp --><option ng-repeat="n in get.ehp" class="ng-binding ng-scope" value="25">25</option><!-- end ngRepeat: n in get.ehp --><option ng-repeat="n in get.ehp" class="ng-binding ng-scope" value="30">30</option><!-- end ngRepeat: n in get.ehp --><option ng-repeat="n in get.ehp" class="ng-binding ng-scope" value="40">40</option><!-- end ngRepeat: n in get.ehp --><option ng-repeat="n in get.ehp" class="ng-binding ng-scope" value="50">50</option><!-- end ngRepeat: n in get.ehp --><option ng-repeat="n in get.ehp" class="ng-binding ng-scope" value="75">75</option><!-- end ngRepeat: n in get.ehp --><option ng-repeat="n in get.ehp" class="ng-binding ng-scope" value="100">100</option><!-- end ngRepeat: n in get.ehp -->     
</select>
<div  id="buynow-kore" class="buy">Buy Now</div>

    $( '#buynow-kore').on( "click", function() {
    var voltage = $( '.kv option:selected').text();
    var hp = $( '.khp option:selected').text();

    var hp15 = "http://www.compressorworld.com/15-hp-rotary-screw-air-compressor-system-230-3-60-total-air-system.html";
    var hp50 = "http://www.compressorworld.com/50-hp-rotary-screw-air-compressors-complete-air-system-lifetime-airend-warranty.html";


    if (voltage == "230" && hp == "15"){
    window.location.href = hp15,"_parent";
    }

    });

В основном я тестирую выбранный вариант и перенаправляю на правильную страницу, но я также попытался поместить это в угловое. Я покажу код, ниже которого я не знаю, как интегрироваться в dom.

var compressorView = angular.module('AC', [ 'ngRoute','metatags']);


compressorView.controller('homeCtrl', function ($scope) {

$scope.buy = function () {
    $(function () {
        $scope.$korebuy = $( '#buynow-kore').on( "click", function() {
        var voltage = $( '.kv option:selected').text();
        var hp = $( '.khp option:selected').text();

        var hp15 = "https://www.compressorworld.com/15-hp-rotary-screw-air-compressor-system-230-3-60-total-air-system.html";
        var hp20 = "https://www.compressorworld.com/20-hp-rotary-screw-air-compressors-complete-air-system-lifetime-airend-warranty.html";
        var hp50 = "https://www.compressorworld.com/50-hp-rotary-screw-air-compressors-complete-air-system-lifetime-airend-warranty.html";

        if (voltage == "230" && hp == "15"){
        window.location.href = hp15,"_blank";
        console.log("complete 15");
        }
        if (voltage == "230" && hp == "20"){
        window.location.href = hp20,"_blank";
        console.log("complete 20");
        }
        });
    });
};

$scope.buy();

});

https://jsfiddle.net/blynn17/ucvn0g3h/

https://jsfiddle.net/blynn17/q7wzvma5/

Код jquery находится в области видимости, но я не уверен, что $ korebuy или $ scope.buy должен сопоставляться с <div id="buynow-kore" class="buy">Buy Now</div>

Blynn 22 март 2016, в 14:56

Источник

1

Забыл использовать Jquery с Angular. Используйте директивы или не используйте Angular.
michelem 22 март 2016, в 13:05
0

Я посмотрю директивы, у меня есть файл jquery, загруженный в версию моего сервера, которую я забыл в скрипке.
Blynn 22 март 2016, в 13:07
0

@Michelem - это общее утверждение, и оно не совсем правильно. Вы не должны использовать jQuery для взаимодействия DOM в вашем контроллере. Привязать к значению области с помощью ngModel . Директивы предназначены для манипулирования DOM, а elem в вашей функции ссылки будет объектом jQlite / jQuery. Так что его заявление о том, чтобы забыть jQuery с помощью angular, просто неверно, angular предоставляет вам jQuery как стандарт, вы должны использовать его только в тех случаях, когда angular предоставляет его, поэтому директивы.
ste2425 22 март 2016, в 13:17

Показать ещё 1 комментарий

Теги:

angularjs

1 ответ

Ещё вопросы

Забыл использовать Jquery с Angular. Используйте директивы или не используйте Angular.
Я посмотрю директивы, у меня есть файл jquery, загруженный в версию моего сервера, которую я забыл в скрипке.
@Michelem - это общее утверждение, и оно не совсем правильно. Вы не должны использовать jQuery для взаимодействия DOM в вашем контроллере. Привязать к значению области с помощью ngModel . Директивы предназначены для манипулирования DOM, а elem в вашей функции ссылки будет объектом jQlite / jQuery. Так что его заявление о том, чтобы забыть jQuery с помощью angular, просто неверно, angular предоставляет вам jQuery как стандарт, вы должны использовать его только в тех случаях, когда angular предоставляет его, поэтому директивы.

cani · Answer 1 · 2016-03-22T12-38-00.000Z

Весь смысл использовать что-то вроде AngularJS - это избегать JQuery, поэтому вы должны воздерживаться от использования их одновременно и, особенно, комбинировать их.

Вместо этого на <div> вы должны добавить <div id="buynow-kore" ng-click="myFunction">Buy Now</div>

Затем в вашем контроллере вы должны сделать свой код так, как вам угодно:

$scope.myFunction = function() { ... set text and stuff ... }