$ is not defined Angularjs

100

18 мая 2021, 07:00

При оценке $('.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>

Answer 1

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

Answer 2

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