0

При оценке $('.phone-details') в консоли элемент выводится, $ так же в консоли определен, но при клике на строку таблицы появляется ошибка ReferenceError: $ is not defined. Использую первый ангуляр, вроде там jQuery light встроена должна быть. Код:

let contactBook = angular.module('ContactBook',[]);

function randomInteger(min,max){
    return Math.floor(min + Math.random()*(max+1-min));
};

function generateNumber(){
    let prefixRange = [300,400];
    let keyRange = [0,100];
    let indexRange = [0,100];
    return `${randomInteger(...prefixRange)}-${randomInteger(...keyRange)}-${randomInteger(...indexRange)}`;
};

function MyListController($scope,$http) {
    $scope.persons = [
        {'name': 'Julie', 'number': generateNumber()},
        {'name': 'Peter', 'number': generateNumber()},
        {'name': 'Stephen', 'number': generateNumber()},
        {'name': 'Hpsuh', 'number': generateNumber()},
        {'name': 'Daniele', 'number': generateNumber()},
        {'name': 'Elizabeth', 'number': generateNumber()},
        {'name': 'Cristine', 'number': generateNumber()}
    ];
    $scope.showDetails = function(person){
        var index = $scope.persons.indexOf(person);
        $http({
            method: 'GET',
            url: 'https://raw.githubusercontent.com/sakuranasty/detailstemplates/master/'+(index+1)+'.html'
        }).then(function(response){
            $('.phone-details').innerHTML = response.data; // посмотреть директиву для вставки html
        },
        function(){
            $('.phone-details').innerHTML = 'FAILED TO LOAD DETAILS';
        });
    };

};
contactBook.controller('MyListController', ['$scope','$http', MyListController]);

разметка:

<!DOCTYPE html>
<html lang="en" ng-app="ContactBook">
    <head>
        <meta charset = "utf-8">
        <title>Phone catalog</title>
        <link rel="stylesheet" href="src/styles/style.css">
        <script src="src/scripts/angular/angular.js"></script>
        <script src="src/scripts/app.js"></script>
    </head>
    <body ng-controller="MyListController">
        <div class="wrap">
            <form class="input-form" action="#" >
                <input type="text" ng-model="query"><!--c маленькой буквой,т.к. property-->
            </form>
            <div class="phone-directory">
                <div class="phone-table">
                    <table >
                        <tr><th>Photo</th></th><th>Name</th><th>Phone</th></tr>
                        <tr ng-repeat="person in persons | filter:query"  ng-click="showDetails(person)">
                            <td>{{$index + 1}}</td><td><img class="icon" src="src/svg/question.svg" alt=""></td><td>{{person.name}}</td><td>{{person.number}}</td>
                        </tr>
                    </table>
                </div>
                <div class="phone-details">

                </div>
            </div>
        </div>

    </body>
</html>
6
  • JQ light действительно встроена в ангуляр, но доступна через angular.element, а не через $. Ну и прямая манипуляция DOM - это не angular way. Есть же ng-include, например, или ng-bind-html, на худой конец.
    – Yaant
    7 авг 2019 в 18:10
  • интересно то, что в консоли $ доступен, и $(selector) тоже определяется 8 авг 2019 в 7:25
  • В консоли по крайней мере Хрома - да, $ определен даже на совершенно пустой странице (<html></html>), это, по-видимому, фича консоли Хрома.
    – Yaant
    8 авг 2019 в 9:43
  • пишите так: angular.element('.phone-details').
    – Konst
    8 авг 2019 в 12:03
  • @Konst К сожалению так не получится, поиск по селектору такая запись не позволяет. воспользовалась советом документации использовать стандарный document.querySelector. Из документации (docs.angularjs.org/api/ng/function/angular.element): Note: Keep in mind that this function will not find elements by tag name / CSS selector. For lookups by tag name, try instead angular.element(document).find(...) or $document.find(), or use the standard DOM APIs, e.g. document.querySelectorAll(). 8 авг 2019 в 12:55

2 ответа 2

0

воспользовалась советом документации использовать стандарный document.querySelector. Для данного примера я получила нужное мне поведение. Далее мне нужно было данный html сделать частью ангуляра, т.е. скомпилировать. Для этого нужно вызвать сервис $compile, который принимает в качестве аргумента объект JQLite. Превратить его в JQLite можно с помощью angular.element(document.querySelector('.phone-details)).

-3

Попробуйте установить jquery плагин для ангулара

npm install jquery --save

А сверу в app.module.ts потом добавьте

import * as $ from "jquery";
1
  • 2
    Совет из разряда "никогда так не делайте". 8 авг 2019 в 5:07

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.