각도 값이 업데이트되지 않는 이유

각도를 사용하려고 생각하고 있으며 내 첫 번째 문제를 발견했습니다. 아마도 그것은 초보자 문제 일 것입니다. 여기 각도 값이 업데이트되지 않는 이유

내 컨트롤러 :

(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 변수에 올바른 값이 있지만 값이 표시되지 않으면 기본값으로 유지됩니다. 왜?

출처

2014-12-28 AlexVanAxe

controller-as 구문을 사용하고 있습니까?

HTML 안에 vm을 참조하려면 controller-as 구문을 사용해야합니다. ngRoute을 사용하는 경우 경로 구성 객체에 controllerAs 속성을 추가해야합니다. 당신이 ngController 지시어를 사용하는 경우,이 작업을 수행 : ng-controller="CreateController as vm" 내 내가 vm 변수 선언하기 전에 var 키워드를 추가 할 때 그것은 단지 다음과 같이 작동 테스트에서 또한

여기

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>

출처

2014-12-28 23:00:56 rodrigopedra

응답 해 주셔서 감사합니다 .var를 입력하면 아무 일도 없었습니다. ( – AlexVanAxe

어떤 각도의 버전을 사용하고 있습니까? 또한 서비스 코드 일부를 공유 할 수 있습니까? – rodrigopedra

'data' 매개 변수에'data' 속성 안에 페이로드가 있으면 내 마음을 아는 한 가지가 있습니다. 어디에 당신은 응답을 단지'vm.account = data; '에 할당합니다. – rodrigopedra

컨트롤러를 올바르게 사용하고 있지 않습니다. 이런 식으로 수정 :

ng-controller="CreateController as vm"

그렇지 않으면 vm 사용자가 설정하지 범위 객체의 속성입니다.

출처

2014-12-28 22:47:55 dfsq

빠른 답장을 보내 주셔서 감사합니다.) 완료. ( – AlexVanAxe

'Account.get (1)'은 무엇입니까? 'vm.account = data.data;'에 데이터가 입력 되나요? – dfsq

예, 방화범이 끌려서 확인했는데 get (1) 계정 서비스의 방법입니다 .1은 키입니다 – AlexVanAxe

각도 값이 업데이트되지 않는 이유

답변

관련 문제