如何使这个工作加载并准备在一起

时间:2014-11-20 14:49:28

标签: javascript jquery dom load

我有这个代码...我加载<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>

1 个答案:

答案 0 :(得分:0)

我不确定我是否知道你的意思但是如果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 =&#34; loadFunction();&#34;

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

  </body>

这将在控制器准备就绪时执行该功能,因此您不需要$scope.loadFunction(); inicialization。

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

我希望这最终适合你。