AngularJS不適用於MVC部分視圖

我目前正在研究ASP.NET MVC項目。 Web應用程序的站點使用Bootstrap創建。後來我添加了一些AngularJS腳本，以便能夠將頁面翻譯成不同的語言。這適用於所有頁面，但如果從頁面加載分部視圖，則不會這樣。因此，例如，我有一個頁面可以按名稱或主機名稱搜索轉出對象。在頁面上，大括號中的所有角度表達式都會被正確評估，並使用翻譯腳本以多種語言的字符串替換。現在，如果我通過三個屬性之一來過濾對象，那麼會加載該頁面的局部視圖，以顯示搜索結果，但這裏是未評估的角度表達式，它只是顯示錶達式本身。AngularJS不適用於MVC部分視圖

這裏是它正常工作的頁面：

@{ 
 
    ViewBag.Title = "{{ 'ROLLOUT-OBJECT_MANAGEMENT.TITLE' | translate }}"; 
 
} 
 

 
<!-- html --> 
 
<div style="font-size: 20px; margin-top: 20px; margin-bottom: 20px;"> 
 
    <div class="gray-background list-group-item" translate="{{'ROLLOUT-OBJECT_MANAGEMENT.TITLE'}}"></div> 
 
</div> 
 
<div class="list-group"> 
 

 
    <div class="gray-background list-group-item"> 
 
     <div class="row margin-bottom"> 
 
      <div class="col-md-3"> 
 
       <h6 translate="{{'ROLLOUT-OBJECT_MANAGEMENT.FIRST_NAME'}}"></h6> 
 
      </div> 
 
      <div class="col-md-3"> 
 
       <h6 translate="{{'ROLLOUT-OBJECT_MANAGEMENT.SURNAME'}}"></h6> 
 
      </div> 
 
      <div class="col-md-3"> 
 
       <h6 translate="{{'ROLLOUT-OBJECT_MANAGEMENT.HOST_NAME'}}"></h6> 
 
      </div> 
 
     </div> 
 
     <div class="row margin-bottom"> 
 
      <div class="col-md-3"> 
 
       <!-- referenced in getPartial() --> 
 
       <input type="text" class="form-control" id="iFirstName" name="iFirstName" placeholder=""> 
 
      </div> 
 
      <div class="col-md-3"> 
 
       <!-- referenced in getPartial() --> 
 
       <input type="text" class="form-control" id="iSurName" name="iSurName" placeholder=""> 
 
      </div> 
 
      <div class="col-md-3"> 
 
       <!-- referenced in getPartial() --> 
 
       <input type="text" class="form-control" id="iHostName" name="iHostName" placeholder=""> 
 
      </div> 
 
      <div class="col-md-3"> 
 
       <!-- getPartial() added to click through javascript--> 
 
       <button type="submit" class="btn btn-primary btn-block" id="iButton"><span translate="{{'ROLLOUT-OBJECT_MANAGEMENT.BUTTON_SEARCH'}}"></span><span class="white-color glyphicon glyphicon-search"></span></button> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div> 
 
<div class="list-group"> 
 
    <div class="gray-background list-group-item"> 
 
     <h5><span translate="{{'ROLLOUT-OBJECT_MANAGEMENT.RESULTS'}}"></span><span class="purple-color glyphicon glyphicon-globe"></span></h5> 
 
    </div> 
 
    <!-- referenced in getPartial() --> 
 
    <div class="gray-background list-group-item"> 
 

 
     <div class="row"> 
 
      <div class="col-md-12" id="partialViewContainer"> 
 
       @{Html.RenderPartial("_RolloutObjectManagementResultsPartial");} 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div> 
 

 

 
<!-- layout --> 
 
@Styles.Render(
 
    "~/content/chosen/chosen.css", 
 
    "~/content/chosen/prism.css", 
 
    "~/content/chosen/style.css", 
 
    "~/content/bootstrap.css", 
 
    "~/content/Site.css") 
 

 
<!-- javascript --> 
 
<script src="~/Scripts/jquery-1.10.2.min.js"></script> 
 
<script src="~/Scripts/chosen/chosen.jquery.js"></script> 
 
<script src="~/Scripts/chosen/prism.js"></script> 
 
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script> 
 
<script> 
 
    var config = { 
 
     '.chosen-select': {}, 
 
     '.chosen-select-deselect': { allow_single_deselect: true }, 
 
     '.chosen-select-no-single': { disable_search_threshold: 10 }, 
 
     '.chosen-select-no-results': { no_results_text: 'Oops, nothing found!' }, 
 
     '.chosen-select-width': { width: "95%" } 
 
    } 
 
    for (var selector in config) { 
 
     $(selector).chosen(config[selector]); 
 
    } 
 
</script> 
 
<script> 
 
    //add functionality to button 
 
    $('#iButton').click(function() { 
 
     getPartial('0'); 
 
    }); 
 
</script> 
 
<script> 
 
    function previous() { 
 
     var temp = document.getElementById("hPage").value; 
 
     //alert(temp);//debug 
 
     if (temp > 0) { 
 
      temp = --temp; 
 
     } 
 
     getPartial(temp); 
 
    } 
 
    function next() { 
 
     var temp = document.getElementById("hPage").value; 
 
     //alert(temp);//debug 
 
     temp = ++temp; 
 
     getPartial(temp); 
 
    } 
 
</script> 
 
<script> 
 
    function getPartial(newPage) { 
 
     //get search values 
 
     var tempFirst = document.getElementById("iFirstName"); 
 
     var tempSur = document.getElementById("iSurName"); 
 
     var tempHost = document.getElementById("iHostName"); 
 
     var firstResult = tempFirst.value; 
 
     var surResult = tempSur.value; 
 
     var hostResult = tempHost.value; 
 
     //ajax call 
 
     $.ajax({ 
 
      url: "_RolloutObjectManagementResultsPartial", 
 
      type: "POST", 
 
      data: { firstName: firstResult, surName: surResult, hostName: hostResult, page: newPage, count: 10 }, 
 
      dataType: "html", 
 
      error: function (xhr) { 
 
       //alert(xhr.responseText);//debug 
 
      }, 
 
      success: function (result) { 
 
       $("#partialViewContainer").html(result).find("select").each(function() { 
 
        $(this).chosen({}); 
 
       }) 
 
      }, 
 
      complete: function() { 
 
       //alert("everything worked");//debug 
 
      } 
 
     }); 
 
    } 
 
</script>

這裏是局部視圖，它不起作用（重要的是表達的{{...} }：

<!-- Import needed namespaces --> 
 
@using RolloutTool.BusinessLayer.Foundation 
 
@using RolloutTool.Utility 
 

 
<!-- Initializing needed variables --> 
 
@{ 
 
    List<RolloutObject> RolloutObjects = ViewContext.Controller.ViewBag.RolloutObjects; 
 
    List<Cluster> Clusters = ViewContext.Controller.ViewBag.Clusters; 
 
    string name = ""; 
 
    int count = 0; 
 
    string rowID = ""; 
 
    int page = 0; 
 
    if (ViewContext.Controller.ViewBag.Page != null) 
 
    { 
 
     page = ViewContext.Controller.ViewBag.Page; 
 
    } 
 
} 
 

 
<!-- html elements --> 
 
<div class="row"> 
 
    <div class="col-md-12"> 
 
     <table class="table"> 
 
      <thead> 
 
       <tr> 
 
        <th style="width:25%"><h6 translate="{{'ROLLOUT-OBJECT_MANAGEMENT.EMPLOYEE'}}"></h6></th> 
 
        <th style="width:20%"><h6 translate="{{'ROLLOUT-OBJECT_MANAGEMENT.WORK_STATION'}}"></h6></th> 
 
        <th class="text-center" style="width:15%"><h6 translate="{{'ROLLOUT-OBJECT_MANAGEMENT.EDIT'}}"></h6></th> 
 
        <th class="text-center" style="width:25%"><h6 translate="{{'ROLLOUT-OBJECT_MANAGEMENT.CLUSTER'}}"></h6></th> 
 
        <th class="text-center" style="width:15%"><h6 translate="{{'ROLLOUT-OBJECT_MANAGEMENT.ASSIGN'}}"></h6></th> 
 
       </tr> 
 
      </thead> 
 
      <tbody> 
 
       <!-- creating all RolloutObject Table rows --> 
 
       @foreach (RolloutObject ro in RolloutObjects) 
 
       { 
 
         <!-- generating rowID --> 
 
        rowID = "row" + Convert.ToString(count); 
 
        count++; 
 
         <!-- generating the full employee name --> 
 
        name = Functions.TryGetValue(ro.Employee.FirstName) + " " + Functions.TryGetValue(ro.Employee.SecondName) + " " + Functions.TryGetValue(ro.Employee.Name); 
 
        <tr id="@rowID"> 
 
         <td>@name</td> 
 
         <td id="@Convert.ToString(rowID + "_hn")">@Convert.ToString(Functions.TryGetValue(ro.Hostname))</td> 
 
         <!-- generate link to right rolloutobjectedit --> 
 
         <td class="text-center"><a href="#"><span class="btn-pencil glyphicon glyphicon-pencil blue-color glyph-hov" onclick="location.href='@Url.Action("RolloutObjectEdit", "RolloutObject", new {hostName = ro.Hostname })'"></span></a></td> 
 
         <!-- generating the link for cluster addition and populating cluster dropdown --> 
 
         <td class="text-center"> 
 
          <div class="row"> 
 
           <div class="col-sm-12"> 
 
            <select class="chosen-select no-margin" style="width:100%" id="@Convert.ToString(rowID + "_cl")" name="iCluster" data-placeholder="Cluster"> 
 
             @if (ro.Cluster != null) 
 
             { 
 
              <option selected>@Convert.ToString(Functions.TryGetValue(ro.Cluster.Name))</option> 
 
             } 
 
             else 
 
             { 
 
              <option></option> 
 
             } 
 
             @foreach (Cluster cluster in Clusters) 
 
             { 
 
              <option>@Convert.ToString(Functions.TryGetValue(cluster.Name))</option> 
 
             } 
 
            </select> 
 
           </div> 
 
          </div> 
 
         </td> 
 
         <td class="text-center"><span class="btn-ok glyphicon glyphicon-ok green-color glyph-hov" onclick="callAjax('@rowID')" /></td> 
 
        </tr> 
 
       } 
 
      </tbody> 
 
     </table> 
 
    </div> 
 
</div> 
 

 
<div class="row"> 
 
    <div class="col-md-12"> 
 
     <input class="hidden" id="hPage" value="@Convert.ToString(page)" /> 
 
     <nav> 
 
      <ul class="pager"> 
 
       <li class="pull-left"><a class="btn-paging glyphicon glyphicon-arrow-left" onclick="previous()"></a></li> 
 
       <li class="pull-right"><a class="btn-paging glyphicon glyphicon-arrow-right" onclick="next()"></a></li> 
 
      </ul> 
 
     </nav> 
 
    </div> 
 
</div> 
 

 
<!-- javascript --> 
 
<script src="~/Scripts/jquery-1.10.2.min.js"></script> 
 
<script src="~/Scripts/chosen/chosen.jquery.js"></script> 
 
<script src="~/Scripts/chosen/prism.js"></script> 
 
<script> 
 
    function callAjax(idRow) { 
 
     //get row values 
 
     var tempTD = document.getElementById(idRow + "_hn"); 
 
     var tempSelect = document.getElementById(idRow + "_cl"); 
 

 
     var tempHostName = tempTD.textContent; 
 
     var tempCluster = tempSelect.options[tempSelect.selectedIndex].text; 
 

 
     //ajax call 
 
     $.ajax({ 
 
      url: "AddToCluster", 
 
      type: "POST", 
 
      data: { clusterName: tempCluster, hostName: tempHostName }, 
 
      dataType: "html", 
 
      error: function (xhr) { 
 
       alert(xhr.responseText); 
 
      }, 
 
      success: function (result) { 
 
       
 
      }, 
 
      complete: function() { 
 
       //alert("everything worked");//debug 
 
      } 
 
     }); 
 
    } 
 
</script> 
 
<script> 
 
    function previous() { 
 
     var temp = document.getElementById("hPage").value; 
 
     //alert(temp);//debug 
 
     if (temp > 0) { 
 
      temp = --temp; 
 
     } 
 
     getPartial(temp); 
 
    } 
 
    function next() { 
 
     var temp = document.getElementById("hPage").value; 
 
     //alert(temp);//debug 
 
     temp = ++temp; 
 
     getPartial(temp); 
 
    } 
 
</script> 
 
<script> 
 
    function getPartial(newPage) { 
 
     //get search values 
 
     var tempFirst = document.getElementById("iFirstName"); 
 
     var tempSur = document.getElementById("iSurName"); 
 
     var tempHost = document.getElementById("iHostName"); 
 
     var firstResult = tempFirst.value; 
 
     var surResult = tempSur.value; 
 
     var hostResult = tempHost.value; 
 
     //ajax call 
 
     $.ajax({ 
 
      url: "_RolloutObjectManagementResultsPartial", 
 
      type: "POST", 
 
      data: { firstName: firstResult, surName: surResult, hostName: hostResult, page: newPage, count: 10 }, 
 
      dataType: "html", 
 
      error: function (xhr) { 
 
       alert(xhr.responseText); 
 
      }, 
 
      success: function (result) { 
 
       $("#partialViewContainer").html(result).find("select").each(function() { 
 
        $(this).chosen({}); 
 
       }) 
 
      }, 
 
      complete: function() { 
 
       //alert("everything worked");//debug 
 
      } 
 
     }); 
 
    } 
 
</script>

這就是腳本包含與所裝載的_Layout.cshtml：

<!DOCTYPE html> 
 
<html ng-app="myApp"> 
 
<head> 
 
    <meta charset="utf-8" /> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    <title>@ViewBag.Title - {{ 'TITLE.PROGRAM' | translate }}</title> 
 
    @Styles.Render(
 
    "~/Content/css", 
 
    "~/Content/flag-icon-css-master/assets/docs.css", 
 
    "~/Content/flag-icon-css-master/css/flag-icon.min.css", 
 
    "~/Content/Site.css") 
 
    <script src="~/Scripts/angular/angular.js"></script> 
 
    <script src="~/Scripts/angular/angular-translate.js"></script> 
 
    <script src="~/Scripts/angular/angular-cookies.min.js"></script> 
 
    <script src="~/Scripts/angular/translate.js"></script> 
 
    <script src="~/Scripts/angular/angular-route.min.js"></script> 
 
    <script src="~/Scripts/angular/angular-translate-storage-cookie.min.js"></script> 
 
    <script src="~/Scripts/angular/angular-translate-storage-local.min.js"></script>  
 
</head> 
 

 
<body ng-controller="Ctrl"> 
 
    
 
    <!-- Here is the html for the navigation bar etc. --> 
 
    
 
    @Scripts.Render("~/bundles/jquery") 
 
    @Scripts.Render("~/bundles/bootstrap") 
 
    @RenderSection("scripts", required: false) 
 
</body> 
 
</html>

我真的不是AngularJS的專家，我只是想提供一些很酷的翻譯功能，但我希望你們有一個想法，爲什麼它不適用於部分視圖。

來源

2015-01-21 newitgirl

您需要在註冊到RenderPartial視圖和ng-controller的視圖頂部添加腳本代碼 – 2015-01-21 04:35:20

因此，您看起來像使用JavaScript AJAX調用來將HTML元素替換爲DOM元素，這恰好包含了Angular表達式。 Angular將不會正確地呈現表達式，因爲表達式在'$ compile（）'階段被評估，這會創建一個鏈接到'scope'的模板。這通常發生在引導階段或指令中的特殊功能。 – Claies 2015-01-21 04:50:23

Angular.js在任何可能的情況下都不鼓勵直接使用DOM操作，如果您在Angular中執行整個過程，它實際上看起來像您試圖實現的邏輯將更容易，更清晰。話雖如此，我正在研究更多，並會很快發佈一個可行的解決方案。 – Claies 2015-01-21 04:59:04

它只是你需要使用ng-include（「'controller/action'」）調用局部視圖。撇號（'）在編寫url時很重要。

例

<div id="TestDiv" ng-include="templateUrl"></div>

和角控制器內部

var app = angular.module("Layout", []); 
    app.controller("LoadPage", function ($scope, $http, $sce) { 

    //Initially 
    $scope.templateUrl = '/Home/DefaultPage'; 

    // To dynamically change the URL. 
    $scope.NewProjFn = function() { 
     $scope.templateUrl = '/Home/ProjectPage'; 
    }; 
});

它很可能不是在所有爲難你重新實現，但通過使用NG-包括你還需要不打一個阿賈克斯電話。它自己完成，包括ajax調用，編譯和顯示。但是像ng-click和其他事件這樣的函數不會像其一次編譯過程那樣工作。

來源

2015-06-04 10:48:59 Rahul

AngularJS不適用於MVC部分視圖

回答

相關問題