Question

我正在使用 AngularJS 来显示我的API的结果（我第一次尝试AngularJS），并希望使用 Jquery 为页面添加一些效果。
问题是，在Angular有时间向页面添加图像和其他元素之前，Jquery似乎已加载。
这可以防止 JQuery 效果起作用我已经通过了许多答案和教程，这些答案和教程围绕以下解决方案，其中没有一个对我有用。

建议的另一种方法是将 JQuery 放入＆＃34;指令＆＃34;，但是如何将3个大型javascript库的内容放入 AngularJS 指示？抱歉，我是 Javascript 的新用户！

以下是不成功的尝试：

.controller('APICtrl', function($scope, $http, $localstorage, $window, $state, $sce) {
// Search function
  $scope.query = {}
  $scope.queryBy = '$'
// gets the data from offices.json
 $http.get('js/offices.json').then(function(resp) {
    console.log('Success', resp);
    $scope.offices = resp.data.office;  
  }, function(err) {
    console.error('ERR', err);
    // err.status will contain the status code
  });

 $scope.sce = function(loc1){
 return $sce.trustAsHtml("https://www.google.com/maps/geocoding/json?address=loc1&key=AIzaSyBGAHnplGPjFoVvShk6Tsna3-DN8rHQBI8")
 }

//retrieves localstorage array
//$scope.favourties= JSON.parse($window.localStorage['fav']);
//$scope.favourites = $window.localStorage['favs'] ? JSON.parse($window.localStorage['favs']) : []
//checks if the array if is in localstorage, if it isnt then it adds an array, if it is it parses the array
if($window.localStorage['fav']){
    $scope.favorites = JSON.parse($window.localStorage['fav']);
    var fav = JSON.parse($window.localStorage['fav']);
} else {
    var fav = [];
    $window.localStorage['fav'] = JSON.stringify(fav);
}

console.log(fav);
$scope.togglefav = function(id) {
//checks if the id being passed in is already in the array
//if it isn't it will add it to the beginning array then stringify it
  if (fav.indexOf(id) == -1){
    fav.unshift(id);
    console.log(fav);
    $window.localStorage['fav'] = JSON.stringify(fav);
    }
//if it is then it will remove it from the array and stringify the array
    else{
      fav.splice(fav.indexOf(id), 1);
      $window.localStorage['fav'] = JSON.stringify(fav);
      console.log(fav);
    }
}

//last viewed office view
if($window.localStorage['last']){
    $scope.favorites = JSON.parse($window.localStorage['last']);
    var last = JSON.parse($window.localStorage['last']);
} else {
    var last = [];
    $window.localStorage['last'] = JSON.stringify(last);
}
console.log(last);
$scope.lastview = function(id) {
//checks if the id being passed in is already in the array
//if it isn't it will add it to the beginning array then stringify it
var c = JSON.parse($window.localStorage['last']);
  if (last.indexOf(id) == -1){
    if (c.length > 3){
      last.pop();
      }
    last.unshift(id);
    $window.localStorage['last'] = JSON.stringify(last);
    }
}


// used to change the favourites icon based on if its in the local storage or not
var e = JSON.parse($window.localStorage['fav']);
$scope.favicon = function(office){
return  e.indexOf(office) !== -1;
};

// used to check if the item is in localstorage and check it against the json array
// if it matches then it will return true and be displayed
// this one is used for favourited offices
$scope.ifinfav1 = function(office){
  return e.indexOf(office.id) !== -1;
};

var f = JSON.parse($window.localStorage['last']);

// this one is used for last viewed offices
$scope.ifinfav2 = function(office){
  return f.indexOf(office.id) !== -1;
};
})

以下是我的代码的相关摘录：

index.html

 $(window).load(function() {
 // load JQuery plugins 
 $.getScript("./js/plugins.all.min.js");
});

<!-- after Angular is loaded !-->
  angular.element(document).ready(function ()  {  
     // load JQuery plugins 
 $.getScript("./js/plugins.all.min.js");
});

 <!-- after Jquery-main is loaded !-->
$(document).ready(function() {  
 // load JQuery plugins 
 $.getScript("./js/plugins.all.min.js");
});

app.js：

<html>
<head>
  <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <title>MyWebpage</title>


    <!-- Template includes !-->
    <link media="all" rel="stylesheet" href="./css/slider-revolution.css">
      <link media="all" rel="stylesheet" href="./css/all.css">
      <link media="all" rel="stylesheet" href="./css/style.css" class="color">
</head>

<body ng-app=“myApp">

        <div ui-view></div>

</body>

<!-- Application Dependencies -->
<script src="node_modules/angular/angular.js"></script>
<script src="node_modules/angular-ui-router/build/angular-ui-router.js"></script>

<!-- Template scripts !-->

<!-- Application Scripts -->
<script src="scripts/app.js"></script>
<script src="scripts/indexController.js"></script>

indexView.js

  ...
state('index', {
                url: '/',
                templateUrl: '../views/indexView.html',
                controller: 'IndexController as user'

...

...

indexController.js：

...
<!— JQuery plugin gallery -->

    <div class="gallery responsive">
        <div class="mask" ng-if=“myStuff.banner">
            <ul class="slideset">
        <ul style="margin:0px; padding:0px">
                <li class="slide" data-transition="slidedown" data-slotamount="10" data-masterspeed="300" data-thumb="" ng-repeat="banner in user.banner" width="300">

                     <! -- load a big ol’ picture !—> 
                    <img ng-src="../../storage/img/{{banner.image.image_url}}">

                    <div class="caption text-box lfl lfl" data-x="-91" data-y="140" data-speed="300" data-start="800" data-easing="easeOutExpo">
                        <h1><span>{{banner.banner_title}}</span></h1>
                        <a class="more" href="{{banner.banner_link}}">READ MORE</a>
                        <div style="" class="tp-leftarrow tparrows default"></div>
                        <div style="" class="tp-rightarrow tparrows default"></div>
                    </div>
                </li>
            </ul>
        </div>
    </div>

JQuery总是在AngularJS文档之前加载

0 个答案: