2014-09-25 162 views
3

我目前正在通過AngularJS $ http.get調用將MVC控制器返回的部分視圖加載到引導模型。我的視圖在模態對話框中正確呈現,但唯一的問題是,我呈現的局部視圖也使用角度,由於某種原因,角度不工作在我的局部視圖中,但如果我將相同的局部視圖轉換爲普通視圖它工作正常。ASP.NET MVC中的AngularJS局部視圖

局部視圖編碼:

@{ 
    ViewBag.Title = "Add Article Types"; 
} 
//other scripts files e.g app.js and angular.js are included in main layout file. 
<script src="~/Scripts/Angular/ArticleTypeController.js"></script> 
<div class="modal-content" ng-controller="ArticleTypeController"> 
    <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
     Add New Article Type 
    </div> 
    <form novalidate role="form" name="ArticleTypeForm" ng-submit="ArticleTypeForm.$valid && Add(model)"> 
     <div class="modal-body"> 
      <div class="form-group"> 
       <label for="ArticleType" class="control-label">Article Type</label> 
       <input type="text" required ng-model="model.ArticleTypeName" class="form-control" id="ArticleType" /> 
      </div> 
     </div> 

    </form> 
    <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     <button type="submit" class="btn btn-primary" value="Add" >Add</button> 
     {{ArticleTypeForm.$valid}} 
    </div> 
</div> 

控制器加載模態與所述局部視圖。

MenuController.js

angular.module('myApp').controller('MenuController', [ 
     '$scope', '$http', 'httpPreConfig', function ($scope, $http, httpPreConfig) { 

      $scope.AddArticleType = function() { 
       $.get("/ArticleType/Add")//returns the partial view. 
        .success(function (response) { 
         ShowModal(response);//it properly shows the modal. but angular doesn't work 
        }); 
      } 
     }]); 

正如可以從該角度表達下面的圖像看到沒有被評估。 As you can see from the image below that angular expression is not being evaluated.

任何幫助將非常感激。 只是爲了讓你知道,角度表達式等工作在正常的意見。

回答

3

也許你正在返回的視圖不是由Angular編譯的。嘗試由$compile服務的模式顯示出來,並且鏈接到正確的範圍之前編譯它:

$scope.AddArticleType = function() { 
    $.get("/ArticleType/Add") 
     .success(function (response) { 
      $compile(response)($scope); 
      ShowModal(response); 
     }); 
} 

但實際上,這是不是在角世界做正確的事。國際海事組織,最好用ng-include加載你的內容在模態,然後顯示給用戶。

+0

嗨,感謝您的回答,現在我已經使用'ng-include =''ArticleType/Add'「'將它呈現爲一個div,它被正確渲染,但角度表達仍然不行。 – user2539602 2014-09-27 09:07:07

+0

嗨,感謝您的回答,現在我已經使用'ng-include =''ArticleType/Add'「'將它呈現爲一個div,它被正確渲染,但是,角度表達仍然不行。見下圖:[鏈接](https://imagizer.imageshack.us/v2/663x373q90/745/x5R7ec.png)。正如你所看到的表達式不被評估 – user2539602 2014-09-27 09:13:49

+0

你在瀏覽器控制檯中是否有任何JS錯誤? – 2014-09-27 09:23:46