Question

我正在考虑使用棱角分明，并找到了我的第一个问题。可能这是一个问题。

这是我的控制器：

(function () {


angular
    .module('account.controllers')
    .controller('CreateController', CreateController);

CreateController.$inject = ['$location', '$scope', 'Account'];

/**
 * @namespace CreateController
 */
function CreateController($location, $scope, Account) {
    vm = this;
    vm.model = Account.get(1).then(getSuccessFn);


    /**
     * @name postsSuccessFn
     * @desc populate with the data of the current account
     */
    function getSuccessFn(data, status, headers, config) {
        vm.account = data.data;
    }
}
})();

这是我的表格：

<div class="row">
<div class="col-md-4 col-md-offset-4">
<h1>Register</h1>

<div class="well">
  <form role="form" name="accountForm" ng-submit="vm.create()" ng-controller="CreateController">
    <div class="form-group">
      <label for="create__name">name</label>
      <input type="text" class="form-control" id="create__name" ng-model="vm.account.name" placeholder="John" />
    </div>

    <div class="form-group">
      <label for="create__payment">Operation Cost</label>
      <input type="text" class="form-control" id="create__payment" ng-model="vm.account.payment" placeholder="15.00" />
    </div>

    <div class="form-group">
      <label for="create__member">member</label>
      <input type="text" class="form-control" id="create__member" ng-model="vm.account.member" placeholder="Golden" />
    </div>

    <div class="form-group">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </form>
</div>

因此，页面加载正常，数据被检索，vm.account变量具有正确的值，但未显示值，它仍然是默认值。为什么呢？

Answer 1

您使用控制器作为语法吗？

要引用vm中的HTML，您应该使用controller-as语法。如果您使用ngRoute，请确保在路由配置对象上添加controllerAs属性。如果您使用ngController指令，请执行以下操作：ng-controller="CreateController as vm"

同样在我的测试中，只有在var变量声明之前添加vm关键字时才有效，如下所示：

var vm = this;

以下是我用来测试它的代码

<!DOCTYPE html>
<html ng-app="account.controllers">
<head>
    <meta charset="utf-8">
    <title>stack overflow</title>
    <script src="http://code.jquery.com/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
    <script>
        (function () {
            angular
                .module('account.controllers', [])
                .controller('CreateController', CreateController)
                .service('Account', ['$q', function($q) {
                    var srvc = this;
                    // emulate $http response
                    srvc.get = function () {
                        return $q.when({ data : {
                            name: 'Test',
                            member: 'Silver',
                            payment: 10
                            }
                        });
                    };
                }]);
            CreateController.$inject = ['$location', '$scope', 'Account'];
            /**
             * @namespace CreateController
             */
            function CreateController($location, $scope, Account) {
                var vm = this;
                vm.model = Account.get(1).then(getSuccessFn);
                /**
                 * @name postsSuccessFn
                 * @desc populate with the data of the current account
                 */
                function getSuccessFn(data, status, headers, config) {
                    vm.account = data.data;
                }
            }
        })();
    </script>
</head>
<body>
<div class="row" ng-controller="CreateController as vm">
    <div class="col-md-4 col-md-offset-4">
    <h1>Register</h1>
    <div class="well">
      <form role="form" name="accountForm" ng-submit="vm.create()" ng-controller="CreateController">
        <div class="form-group">
          <label for="create__name">name</label>
          <input type="text" class="form-control" id="create__name" ng-model="vm.account.name" placeholder="John" />
        </div>

        <div class="form-group">
          <label for="create__payment">Operation Cost</label>
          <input type="text" class="form-control" id="create__payment" ng-model="vm.account.payment" placeholder="15.00" />
        </div>

        <div class="form-group">
          <label for="create__member">member</label>
          <input type="text" class="form-control" id="create__member" ng-model="vm.account.member" placeholder="Golden" />
        </div>

        <div class="form-group">
          <button type="submit" class="btn btn-primary">Submit</button>
        </div>
      </form>
    </div>
</div>
</div>
</body>
</html>

Answer 2

您没有正确使用controllerAs语法。以这种方式修复：

ng-controller="CreateController as vm"

否则vm是范围对象的属性，您永远不会设置它。

为什么值不更新的角度

2 个答案: