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內

回答

相關問題