如何使它工作负载并一起准备好答案

【问题标题】：How make that works load and ready together如何使它工作负载并一起准备好
【发布时间】：2014-11-20 14:49:28
【问题描述】：

我有这个代码...我加载了<head>许多files.js，这很好用...但是...{{sec-intro}}是一个变量并且有它的值，但不加载文件.. .

<!-- language: lang-js -->
<script type="text/javascript">
    $( document ).ready(function() {
        jQuery('head').load( 'tpl/head.html' );
    });
</script>

<script type="text/javascript">
    $( document ).ready(function() {
        jQuery('#intro').load( 'tpl/sec-intro-{{sec-intro}}.html' );
    });
</script>

【问题讨论】：

{{sec-intro}} 不是常规的 JS 变量。看起来像一个 angularJS 占位符。
我知道先生，问题不在于 {{variable}}。 .load 不起作用，我认为是时间执行 (DOM) 的问题，我也认为我没有正确使用 .ready，谢谢

标签： javascript jquery dom load

【解决方案1】：

我不确定我是否明白你的意思，但如果 sec-intro 是一个 javascript 变量，你可以试试这个：

<script type="text/javascript">
    $( document ).ready(function() {
        jQuery('#intro').load( 'tpl/sec-intro-' + sec-intro + '.html' );
    });
</script>

但我认为您对使用 {{var}} 的 AngularJS 表示法感到困惑。

编辑：

嗯，首先变量名不能有连字符，所以你需要更改该名称。

第二件事，你应该在控制器的代码中声明这个函数。我做了一个小角度应用程序，即代码：

脚本：

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.secintro = '01';

  $scope.loadFunction = function(){
    jQuery('#intro').load('tpl/sec-intro-' + $scope.secintro + '.html');
  };

  $scope.loadFunction();
});

HTML：

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="jquery" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script data-require="angular.js@1.0.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js" data-semver="1.0.8"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">

  </body>

</html>

然后你可以使用 loadFunction 作为 angularJS 函数，即：ng-init="loadFunction();"

 <body ng-controller="MainCtrl" ng-init="loadFunction();">

  </body>

这将在控制器准备好时执行该函数，因此您不需要$scope.loadFunction(); 初始化。

Here is the plunker 只需在控制台中打印正确的字符串。

我希望这最终对你有用。

【讨论】：

对不起先生，我不是高级程序员......我在firebug中看到sec-intro很好地发挥了它的价值，但是.load没有加载.html文件，谢谢
在您提供的代码中，我无法想象 'tpl/sec-intro-{{sec-intro}}.html' 可以是不同的字符串，因为您不替换 {{sec -intro}} 与其他字符串。我们需要更多信息。您可以使用console.log('tpl/sec-intro-{{sec-intro}}.html') 在控制台中查看运行时的值。
在 Firebug 中我是这样看的 $ (Document) .ready (function () { jQuery ('# intro') load ('tpl / intro-sec-01.html.'); }) 即 {{sec-intro}} 采用值 '01' 但 .load 不会加载 html ...如果我更改 { {sec-intro}} 01 直接在代码中加载 .load 然后是的，它运行良好......
我认为你正在使用 angularJS 或类似的框架来替换变量，所以我猜替换动作是在脚本执行后执行的。试试这个：<script type="text/javascript"> var url = 'tpl/sec-intro-{{sec-intro}}.html'; $( document ).ready(function() { jQuery('#intro').load(url); }); </script> 这是我所能提供的所有信息。我希望这对你有用。
它不起作用...... :(在萤火虫中结果是这个<script type="text/javascript"> var url = 'tpl/sec-intro-01.html'; $( document ).ready(function() { jQuery('#intro').load(url); }); </script>