使用工廠方法創建服務時AngularJS模塊未定義

我正在學習MVC中的AngularJS並創建了將模型傳遞給Angular Controller的服務。但它給我的錯誤使用工廠方法創建服務時AngularJS模塊未定義

JavaScript runtime error: 'accountModule' is undefined

這是我在做什麼：

AccountController.cs

public ViewResult Index() 
{ 
    var accounts = new List<Accounts> 
         { 
          new Accounts 
           { 
            Id = 111, 
            Designation = "Tech Lead", 
            Name = "AAA" 
           }, 
          new Accounts 
           { 
            Id = 222, 
            Designation = "Softwre Engineer", 
            Name = "BBB" 
           }, 
          new Accounts 
           { 
            Id = 111, 
            Designation = "Project Manager", 
            Name = "CCC" 
           } 
         }; 

    var settings = new JsonSerializerSettings 
         { 
          ContractResolver = new CamelCasePropertyNamesContractResolver() 
         }; 

    var accountJson = JsonConvert.SerializeObject(accounts, Formatting.None, settings); 

    return this.View("Index", (object)accountJson); 
}

Index.cshtml

<script type="text/javascript" src="../../Scripts/Modules/Account/Account.js"></script> 
<div ng-app="accountModule"> 
    <div ng-controller="accountController"> 
     <h1>{{message}}</h1> 
     <div class="container" ng-init="employees in {{employees}}"> 
      <h2>Employee Details</h2> 
      <div class="row"> 
       <table class="table table-condensed table-hover"> 
        <tr> 
         <td> 
          ID 
         </td> 
         <td> 
          Name 
         </td> 
         <td> 
          Designation 
         </td> 
        </tr> 
        <tr ng-repeat="emp in employees"> 
         <td> 
          {{emp.id}} 
         </td> 
         <td> 
          {{emp.name}} 
         </td> 
         <td> 
          {{emp.designation}} 
         </td> 
        </tr> 
       </table> 
      </div> 
     </div> 
     <div> 
      @*{{emps}}*@ 
     </div> 
    </div> 
</div> 

<script type="text/javascript"> 

    accountModule.factory('accountService', function() { 
      var factory = {}; 

      factory.employees = @Html.Raw(Model); 

      return factory; 
     }); 

</script>

Account.js

var account = angular.module('accountModule',[]); 

account.controller('accountController', [ 
    '$scope', 'accountService', function ($scope, accountService) { 


     $scope.employees = accountService.employees; 

     $scope.message = "Hi on " + (new Date()).toDateString(); 
    } 
]);

我不明白我出錯的地方。

來源

2015-08-08 user2988458

您需要在account.js後面移動內聯腳本。

另外可變應account代替accountModule

代碼

<script src="angular.js"></script> 
<script src="app.js"></script> 
<script src="account.js"></script> 
<script type="text/javascript"> 
//account.factory('accountService', function() { //this is alternative use below one 
angular.module('accountModule').factory('accountService', function() { 
    var factory = {}; 

    factory.employees = @Html.Raw(Model); 

    return factory; 
}); 
</script>

來源

2015-08-08 06:36:32

您的最後一行'此外變量應該是帳戶，而不是accountModule'解決了我的問題。謝謝您的幫助。現在我可以將Model傳遞給AngularJS控制器。 :) – user2988458

另外我想提一提的是，將服務移動到JS將不起作用，因爲我必須將數據從'cshtml'傳遞到控制器。 – user2988458

MVC視圖渲染命令 - 1.開始與視圖第一然後相關束（外部CSS， JS）。

2.In爲了打發我們必須.cshtml文件中的內聯元素（雖然不推薦），但是，如果這是去那麼方式，使用服務注入到相關的控制器 -

模型數據

@section scripts 
    { 
    <script> 
    (function (undefined) { 
     window.app.factory('searchBinding', function() { 
      return @Html.Raw(Json.Encode(Model)) 
     }) 
    })(undefined); 

</script> 
}

現在，如上面的代碼是內聯它獲取與視圖本身執行，但角模塊尚未定義爲它尚未被下載。因此它會拋出未定義的錯誤。

爲了解決這一點，我們可以將所有的核心文件（包）後使用RenderSection在_Layout.cshtml被加載，這股勢力甚至內嵌部分只加載後，這些文件被加載（步驟2 。@section腳本用於此目的）.Snippet from _Layout.cshtml文件

@ Scripts.Render（「〜/ bundles/angularjs」）; @RenderSection（「scripts」，false）;

來源

2017-07-12 16:20:47

使用工廠方法創建服務時AngularJS模塊未定義

回答

相關問題