[C#]角结构不正确的地方

标签: AngularJS C#
发布时间: 2017/2/24 2:48:11
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.

我想做的就是调用我后端通过吴点击和 $http.get。然后,我要设置我会在我的 html 中显示的项的值。这里是我的结构。实际上并没有得到任何错误所以任何如何看待我的代码是不正确的信息将是巨大的。谢谢你。

HTML

<head>
<title>Hello</title>
<script src="~/Scripts/profileController.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js">    </script>

<section ng-controller="profileController as vm">

    <div class="container">

        <div style="padding-left:20px; padding-right: 1000px; height:700px;">

            <h2>Create Profile</h2>

            <img src="app/img/user.png" />
            <label for="eventName">UserName: {{vm.newUser.UserName}}</label>
            <input id="eventName" ng-model="UserName" type="text" placeholder="Edit User Name" />
            <label for="eventName">Name: {{vm.nameName}}</label>
            <input id="eventName" ng-model="nameName" type="text" placeholder="Edit Name" />
            <label for="eventName">Age: {{vm.age}}</label>
            <input id="eventName" ng-model="age" type="text" placeholder="Edit age" />
            <label for="eventName">College: {{vm.college}}</label>
            <input id="eventName" ng-model="college" type="text" placeholder="Edit college" />
            <label for="eventName">City: {{data.city}}</label>
            <input id="eventName" ng-model="name" type="text" placeholder="Edit city" />

            <a class="btn btn-default btn-lg" ng-click="vm.getUserList()">Register</a>

        </div>
    </div>


</section>

控制器/工厂

 angular.module("app", [])
 .controller('profileController', ['$scope', 'profileFactory', function ($scope, profileFactory) {

var vm = this;
this.getUserList = function () {

    profileFactory.getUserList($scope).success(function (data) {
        $scope.UserList = data;
    });
}
 }])

 .factory('profileFactory', ['$http', '$q', function ($http, $q) {
var urlBase = "/api/saveUser";
var dealerProcessReportSetupFactory = {

    getUserList: function () {

        return $http.get(urlBase + "/UserList");
    }
};

return dealerProcessReportSetupFactory;
 }]);

API 控制器

 public class profileController : ApiController
{
    // GET api/DealerProcessReportSetup
    [HttpGet]
    [ActionName("saveUser")]
    public tblOwl getUserList()
    {
        using (VSCDevEntities db = new VSCDevEntities()) 
        {
            var Owl = (from z in db.tblOwls select z).FirstOrDefault();

            return Owl;

        }

    }
} 

解决方法 1:

下面的事情是缺掉的

  1. ng-app指令必须是有在对 body / html 标记像 ng-app="app"
  2. 应该在你的页面标题中加载脚本。
  3. 你必须在加载使用角对象的任何其他文件之前加载 angular.js

引用应

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
<script src="~/Scripts/profileController.js"></script>

更新

当你使用的 controllerAs 您的控制器应使用的语法 this 关键字,或者至少你应该定义 getUserList() 方法在此关键字作为你 ng-click="vm.getUserList()"

控制器

 angular.module("app", [])
 .controller('profileController', ['$scope', 'profileFactory', function ($scope, profileFactory) {
   var vm = this;
   this.getUserList = function () {

      profileFactory.getUserList($scope).success(function (data) {
          $scope.UserList = data;
      });
   } 
 }])
赞助商