jQuery-ng-view不运行JavaScript，除非脚本在呈现的html内

我有一个<script src="">我的ng-view以外，脚本本身是一个jQuery函数，它改变ng-view内的内容，但它不工作，除非我把在我正在渲染的html页面内的<script src="">。这非常恼人，违反了DRY规则（不要重复自己），因为现在我必须将所有脚本放在我的所有html文件中，因为将它放在index.html的底部不起作用。jQuery-ng-view不运行JavaScript，除非脚本在呈现的html内

这里是我的index.html

<!DOCTYPE html> 

<html ng-app="enitoniApp"> 

<head> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <!-- Stylesheets --> 
    <link rel="stylesheet" href="global.css"> 
    <link rel="stylesheet" href="pages/css/home.css"> 

    <!-- Fonts --> 
    <link href='http://fonts.googleapis.com/css?family=Roboto:400,300italic,300,100italic,100,400italic,500,500italic,700,700italic,900italic,900' rel='stylesheet' type='text/css'> 

</head> 


<body ng-controller="mainController"> 
    ... 
     <!-- Angular --> 
     <div class="wrap"> 
      <div ng-view></div> 
      ... 
</body> 

<!-- Javascripts --> 
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script> 
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script> 
<script src="js/angular_script.js"></script> 

<!--- Global Script --> 
<script src="js/global.js"></script> 
<!--- Content --> 
<script src="js/contentinject.js"></script> 

</html>

注：“...”表示代码太大，不得不取出来这是可读的。

现在里面contentinject.js我们：

/** Content Injection **/ 

function isValid() { 
    $.getJSON("/js/content.json", function (d) { 
     console.log("json parsing of 'content.json' performed successfully."); 
    }).fail(function (d, textStatus, error) { 
     errorCall("Fatal error", "json", "Something went wrong and the site may not properly display, if the problem persists contact the website administrator.<br/><br/>Sorry about that.","<b>Couldn't parse 'content.json'</b><br/><br/>" + error) 
    }); 
} 
setTimeout(isValid, 2000) 

$.getJSON("/js/content.json", function (data) { 
    $(".lander .title").text(data.lTitle); 
    $(".lander .subtitle").text(data.lSubtitle); 
    $(".lander .text").html(data.lText.split('\n').join('<br />')); 
});

它修改的DOM：

home.html的（什么被注入到NG-观点，也是我们的示例性部分）

<body> 
    <div class="lander"> 
     <div class="w-ctrl"> 
      <div class="container"> 
       <div class="title-con"> 
        <div class="title"></div> 
        <div class="subtitle"></div> 
       </div> 
       <div class="text-con"> 
        <div class="text"></div> 
       </div> 
      </div> 
     </div> 
    </div> 
</body>

现在，您可以看到，脚本清晰地位于文档的底部，并且也位于angular.js下，因此它应该加载并注入部分内容，但事实并非如此。如果我把contentinject.js放在home.html里面，它就可以工作。

有没有办法解决这个问题？

来源

2015-07-10 Sebastian Olsen

信不信由你，但是你打破了更多的规则，而不仅仅是DRY做到这一点 - 这不包括'不要滥用jQuery与Angular'。它不会工作，因为“清晰地在底部”与Angular及其应用程序流程没有任何关系。你可以确定'angular'对象在这一点上是可用的，但仅此而已。我会建议将这个问题重新定义为'如何在Angular中正确地做到这一点'以获得高质量的答案和积极的反馈。 – estus

如果你会那么善良，并告诉我我做错了什么，那么，因为我真的不知道如何制定这种方式。 :) –

做视图相关的东西在路线控制器 - 它在视图之间共享，并且干得足够。 $ http替换了jQuery请求并转到单独的服务，即骨干。数据绑定取代所有元素内容分配。 DOM修改（如果还有剩余的话）则转到指令。 – estus

如果您已将某个控制器分配给您的视图，则每次加载视图时都会调用您的控制器。在这种情况下，你可以在你的控制器，只要它被调用执行一些代码..

事情是这样的：

<ion-nav-view ng-controller="indexController" name="other"></ion-nav-view>

和控制器：

app.controller('indexController', function($scope) { 

    /* 
     Write some code directly over here 
     without any function, and it will be executed every time your view loads. 
     Something like this: 
    */ 

    $scope.xyz = 1; 
});

你可以找到更多细节在this的答案..

来源

2015-07-10 03:47:14

jQuery-ng-view不运行JavaScript，除非脚本在呈现的html内

回答

相关问题