将jQuery与AngularJS集成

Question

我在理解如何集成jQuery方法时遇到了一些问题。我认为我的主要问题是如何处理Angular的目录。这是我发现的一些简单的代码，并且很难集成到我自己的工作中。

Here is an example of what I want to add。

//---------------MY APP FILE------------------///

var myApp = angular.module('myApp', [

    'ngRoute',
    'booksController',

]);



//create routes

myApp.config(['$routeProvider', function ($routeProvider) {

    $routeProvider
        .when('/list', {
            templateUrl: 'views/books_list.html',
            controller: 'ListController'
        })
        .when('/details/:itemId', { //add new page

            templateUrl: 'views/details.html',
            controller: 'DetailController'
        })
        .when('/contact', { //add new page

            templateUrl: 'views/contact.html',

        })
        .otherwise({

            redirectTo: '/list' // default view

        });

}]);


//--------------MY CONTROLLER FILE-----------///

var booksController = angular.module("booksController", []);


//-----------MY ATEMPT TO INTEGRATE - DIDN'T WORK ---///
var Toolbar = angular.module('Toolbar', []);

Toolbar.directive('toolbarTip', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            $(element).toolbar(scope.$eval(attrs.toolbarTip));
        }
    };
});

//-------------------------------------------------//


// new module //productcontroler
var ListController = function ($scope, $http) { // controller skech or blueprint

    $http.get('js/books.json').success(function (data) {

        $scope.books = data;
        $scope.mySortFn = function (data) {
            return $scope.orderby === "price" ? parseFloat(data.price) : data[$scope.orderby];
        };

    });




};

var DetailController = function ($scope, $http, $routeParams) { // new page controller

    //$routeParams Let us transter data between pages, once clicked on a product in first page - it will load form the $routeParams

    $http.get('js/books.json').success(function (data) {

        $scope.books = data;
        $scope.whichItem = $routeParams.itemId;
        //whichItem a scope property- a getter for the product id and transfer it to the new page
        if ($routeParams.itemId > 0) {
            $scope.prevItem = Number($routeParams.itemId) - 1;
        } else {

            $scope.prevItem = $scope.books.length - 1;
        }

        if ($routeParams.itemId < $scope.books.length - 1) {

            $scope.nextItem = Number($routeParams.itemId) + 1;
        } else {

            $scope.nextItem = 0;
        }


    });

};



booksController.controller("ListController", ListController); //bind module to controller
booksController.controller("DetailController", DetailController);

<!---------------------NAV---------------------------------------------->
<nav class="navbar navbar-fixed-top" role="navigation">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
        <a class="navbar-brand" href="#">BookStore</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

        <form class="navbar-form navbar-left" role="search">
            <div class="form-group">
                <input type="text" class="form-control" placeholder="Search Book" autofocus ng-model="query">
            </div>
            <select class="form-control" ng-model="orderby">
                <option disabled selected value> -- Sort By -- </option>
                <option value="author">Author</option>
                <option value="price">Price</option>
            </select>
            <div class="checkbox navbar-btn">
                <label class="navbar-link" for="filterUnfulfilled">
                    <input type="checkbox" class="autosubmit" id="filterUnfulfilled" ng-model="direction" name="direction" checked value="true"> Descending
                </label>
                <label class="navbar-link" for="filterUnfulfilled">
                    <input type="checkbox" class="autosubmit" id="filterUnfulfilled" value="true" ng-model="direction" name="direction" value="reverse"> Ascending
                </label>
                <a href="#/contact.html">Contact</a>
            </div>

        </form>

    </div>
    <!-- /.navbar-collapse -->
</nav>

<!---------------------------------------------------------------------->

<!---------------------CONTENT------------------------------>

<!-------------------------------TEST---------------------------->

<!------------------------------END TEST---------------------------->

<br/>
<br/>

<!---------------------------------JQUERY PLUGINN TEST--------------------------------------------------------->
    <div class="btn-toolbar" toolbar-tip="{content: '#toolbar-options', position: 'top'}" id="format-toolbar1">
        <i class="fa fa-cog"></i>
    </div>
    <div class="btn-toolbar" toolbar-tip="{content: '#toolbar-options', position: 'right', style: 'primary'}" id="format-toolbar2">
        <i class="fa fa-cog"></i>
    </div>
    <div class="btn-toolbar" toolbar-tip="{content: '#toolbar-options', position: 'bottom', style: 'primary', animation: 'flip'}" id="format-toolbar3">
        <i class="fa fa-cog"></i>
    </div>

    <div id="toolbar-options">
       <a href="#"><i class="fa fa-plane"></i></a>
       <a href="#"><i class="fa fa-car"></i></a>
       <a href="#"><i class="fa fa-bicycle"></i></a>
    </div>

<!------------------------------------------------------------------------------------>
<br/>
<br/>

<div id="columns">
    <div class="pin" ng-repeat="item in books | filter: query | orderBy: orderby:direction | orderBy:mySortFn:direction">


        <a href="#/details/{{books.indexOf(item)}}">


            <!------------------------------------------------------>

            <img src="img/{{item.pic}}.jpg" alt="{{item.pic}}">

            <h3>{{item.title}}</h3>
            <p>
                <b>Author: </b>{{item.author}}
                <br/>
                <b>Genere: </b>{{item.genre}}
                <br/>
                <b>Price: {{item.price}} Nis </b>


                <div class="ratings">
                    <p class="pull-right">15 reviews</p>
                    <p>
                        <span class="glyphicon glyphicon-star"></span>
                        <span class="glyphicon glyphicon-star"></span>
                        <span class="glyphicon glyphicon-star"></span>
                        <span class="glyphicon glyphicon-star"></span>
                        <span class="glyphicon glyphicon-star"></span>
                    </p>
                </div>

            </p>


            <!--------------------------->




        </a>

    </div>
</div>