我有这个功能：
var app = angular.module("delivcard", []);
app.controller("DelivCtrl", ['$scope', function ($scope) {
$scope.card = function ()
{
$scope.cards = [{name: 'California Ale Yeast', ferment:'68F - 73F', tolerance: 'High', attenuation: yeastBank[1].attenuation},
{name: 'California Ale Yeast', ferment:'68F - 73F', tolerance: 'High', attenuation: '73.0% - 80.0%'}];
}
}]);
应该将值加载到html页面。但是，这些值来自数据库，因此我不希望在页面打开后立即加载值。另一方面，我想在调用函数时加载值。以下是我在html脚本中使用不同的js文件调用的方法：
OTHER FUNCTIONS
function initShopDisplay()
{
for(var i = 0; i < yeastBank.length; i++)
{
if(yeastBank[i].isPrivate == false)
{
$scope.card();
}
}
}
但是，这会返回$scope未定义的内容。有什么问题？另外，如何根据索引的大小来使变量$scope.cards添加行。
Angular文件
'use strict';
$(document).ready(function() {
var animating = false;
var step1 = 500;
var step2 = 500;
var step3 = 500;
var reqStep1 = 600;
var reqStep2 = 800;
var reqClosingStep1 = 500;
var reqClosingStep2 = 500;
var $scrollCont = $(".phone__scroll-cont");
$(document).on("click", ".card:not(.active)", function() {
if (animating) return;
animating = true;
var $card = $(this);
var cardTop = $card.position().top;
var scrollTopVal = cardTop - 30;
$card.addClass("flip-step1 active");
$scrollCont.animate({scrollTop: scrollTopVal}, step1);
setTimeout(function() {
$scrollCont.animate({scrollTop: scrollTopVal}, step2);
$card.addClass("flip-step2");
setTimeout(function() {
$scrollCont.animate({scrollTop: scrollTopVal}, step3);
$card.addClass("flip-step3");
setTimeout(function() {
animating = false;
}, step3);
}, step2*0.5);
}, step1*0.65);
});
$(document).on("click", ".card:not(.req-active1) .card__header__close-btn", function() {
if (animating) return;
animating = true;
var $card = $(this).parents(".card");
$card.removeClass("flip-step3 active");
setTimeout(function() {
$card.removeClass("flip-step2");
setTimeout(function() {
$card.removeClass("flip-step1");
setTimeout(function() {
animating = false;
}, step1);
}, step2*0.65);
}, step3/2);
});
$(document).on("click", ".card:not(.req-active1) .card__request-btn", function(e) {
if (animating) return;
animating = true;
var $card = $(this).parents(".card");
$card.removeClass("flip-step3 active");
setTimeout(function() {
$card.removeClass("flip-step2");
setTimeout(function() {
$card.removeClass("flip-step1");
setTimeout(function() {
animating = false;
}, step1);
}, step2*0.65);
}, step3/2);
});
$(document).on("click",
".card.req-active1 .card__header__close-btn, .card.req-active1 .card__request-btn",
function() {
if (animating) return;
animating = true;
var $card = $(this).parents(".card");
$card.addClass("req-closing1");
setTimeout(function() {
$card.addClass("req-closing2");
setTimeout(function() {
$card.addClass("no-transition hidden-hack")
$card.css("top");
$card.removeClass("req-closing2 req-closing1 req-active2 req-active1 map-active flip-step3 flip-step2 flip-step1 active");
$card.css("top");
$card.removeClass("no-transition hidden-hack");
animating = false;
}, reqClosingStep2);
}, reqClosingStep1);
});
});
var app = angular.module("delivcard", []);
app.controller("DelivCtrl", function ($scope) {
$scope.cards = "";
$scope.card = function ()
{
$scope.cards = [{name: 'California Ale Yeast', ferment:'68F - 73F', tolerance: 'High', attenuation: yeastBank[1].attenuation},
{name: 'California Ale Yeast', ferment:'68F - 73F', tolerance: 'High', attenuation: '73.0% - 80.0%'}];
}
});
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Delivery Card Animation</title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
<link rel='stylesheet prefetch' href='http://fonts.googleapis.com/css?family=Open+Sans'>
<link rel="stylesheet" href="css/store.css">
</head>
<body>
<div ng-app="delivcard">
<div ng-controller="DelivCtrl">
<section ng-repeat="card in cards" class="card theme-purple ng-scope" data-color="#BA68C8">
<section class="card__part card__part-1">
<div class="card__part__inner">
<header class="card__header">
<div class="card__header__close-btn"></div>
<span class="card__header__id ng-binding"># 2618-3157</span>
</header>
<div class="card__stats" ng-style="{'background-image': 'url()'}" style="background-image: url(");">
</div>
</div>
</section>
<section class="card__part card__part-2">
<div class="card__part__side m--back">
<div class="card__part__inner card__face">
<div class="card__face__colored-side"></div>
<div class="card__face__from-to">
<p class="ng-binding">{{card.name}}</p>
</div>
<div class="card__face__stats card__face__stats--req">Optimal Ferment. Temp
<p class="ng-binding">{{card.ferment}}</p>
</div>
<div class="card__face__stats card__face__stats--pledge">Alcohol Tolerance
<p class="ng-binding">{{card.tolerance}}</p>
</div>
<div class="card__face__stats card__face__stats--weight">Attenuation
<p class="card__face__stats__weight">
<span class="ng-show">{{card.attenuation}}</span>
</p>
</div>
</div>
</div>
<div class="card__part__side m--front">
<div class="card__sender">
<h4 class="card__sender__heading">Description</h4>
<div class="card__path-big"></div>
</div>
<div class="card__from-to">
<div class="card__from-to__inner">
<div class="card__text card__text--left">
<p class="card__text__heading">Pitchable Batch Size:</p>
<p class="card__text__middle ng-binding"><select id="size" name="size" class=""><option value="5">5 BBLs/HL</option><option value="7">7 BBLs/HL</option><option value="10">10 BBLs/HL</option><option value="20">20 BBLs/HL</option><option value="30">30 BBLs/HL</option><option value="40">40 BBLs/HL</option><option value="50">50 BBLs/HL</option><option value="60">60 BBLs/HL</option><option value="70">70 BBLs/HL</option><option value="80">80 BBLs/HL</option><option value="90">90 BBLs/HL</option><option value="100">100 BBLs/HL</option></select></p>
</div>
<div class="card__text card__text--right">
<p class="card__text__heading">Quantity:</p>
<p class="card__text__middle ng-binding"><input id="modalQTY" name="modalQTY" type="number" placeholder="Quantity" style="width: 80px;" min="1" value="1" class=""></p>
</div>
</div>
</div>
<section class="card__part card__part-3">
<div class="card__part__side m--back"></div>
<div class="card__part__side m--front">
<div class="card__timings">
<div class="card__timings__inner">
<div class="card__text card__text--left">
<p class="card__text__heading">Packaging</p>
<p class="card__text__middle ng-binding"><select id="packaging" name="packaging" class=""><option value="pp">Pure Pitch</option><option value="hb">Homebrew</option><option value="cp">Custom Pour</option></select></p>
</div>
</div>
</div>
<section class="card__part card__part-4">
<div class="card__part__side m--back"></div>
<div class="card__part__side m--front">
<button type="button" class="card__request-btn">
<span class="card__request-btn__text-1">Add to Cart</span>
</button>
</div>
</section>
</div>
</section>
</div>
</section>
</section>
</div>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js'></script>
<script src="js/store.js"></script>
<script type="text/javascript" src="js/SalesIntegration.js"></script>
</body>
</html>