2014-07-25 4 views
2

이것이 가능한지 확실하지 않지만 제대로 작동하지 않을 수 있습니다.AngularJS, 데이터를 stateProvider OnEnter 함수에 전달하여 모달 채우기

기본 전제

내가 행에 클릭의 내용으로 채워집니다 모달를 열어 테이블에서 편집 버튼 클릭을하고 싶습니다.

방법

URL 매개 변수를 사용하지 않고이 작업을 수행하고 싶습니다. 테이블을 채운 API 응답은 이미 모달을 채우는 데 필요한 모든 것을 제공하므로 필요한 API를 다시 호출하여 필요한 데이터를 다시 가져 오는 이유는 무엇입니까?

다음은 사용자가 프로세스를 시작하기 위해 클릭하는 테이블입니다.

<tbody> 
    <tr ng-repeat="item in accounts"> 
    <td><span class="label label-success">Active</span></td> 
    <td>{{item.login}}</td> 
    <td>{{item.full_name}}</td> 
    <td>{{item.member_since}}</td> 
    <td>Daily</td> 
    <td><a ng-click="showLinks(item)" class="btn btn-warning">LINKS</a></td> 
    <td><a ng-click="editAccount(item)" class="btn btn-primary">EDIT</a></td> 
    <td><a ng-click="deleteAccount(item)" class="btn btn-danger">DELETE</a></td> 
    </tr> 
</tbody> 

제 컨트롤러에는 다음과 같은 것들이 있습니다.

$scope.editAccount = function (item) { 
    console.log("Editing Account"); 
    console.log(item); 
    $state.go('edit', item); 
} 

콘솔이 개체를 올바르게 인쇄합니다. 이 시점에서 모두 좋다. 이 시점에서이 선택된 항목을 stateProvider에 전달하여 onEnter 함수에서 모달을 채울 수있게하려고합니다.

"return {login : 'TEST'}"을 주석 처리했습니다. 이것을 그대로두면 모달이 올바르게 채워집니다.

$stateProvider.state('edit', { 
    url: '/edit', 
    onEnter: function($stateParams, $state, $modal) { 
     console.log("Enter Edit"); 

     $modal.open({ 
      templateUrl: "views/account_edit.htm", 
      //params: ['login'], 
      resolve: { 
       item: function() { 
        console.log("Resolving Edit"); 
        console.log($stateParams); 
        console.log($state.params); 
        console.log(this); 
        //return {login:"TEST"}; 
       } 
      }, 
      controller: ['$scope', 'item', function($scope, item) { 
       console.log("Controlling Edit"); 
       $scope.item = item; 

       $scope.cancel = function() { 
        $scope.$close(true); 
       }; 

       $scope.ok = function() { 
        $scope.$close(true); 
        }; 
       }] 
      }).result.then(function(result) { 
       if (result) { 
        console.log("Acting on RESULT"); 
        return $state.go("home"); 
       } 
      }); 
     } 
    }); 

$ stateProvider 내에서 $ stage.go에 전달 된 ITEM에 액세스하는 방법이 작동하지 않는 것 같습니다. 누구든지 아이디어가 있습니까? 아래의 문서는 내가 $ stateParams의 데이터를 볼 수 있어야합니다 것을 제안하지만 (옵션 PARAMS에) 거기

PARAMS (선택 사항)

이동이다 - {객체 =} - 상태로 보내질 매개 변수의 맵은 $ stateParams를 채 웁니다. 지정되지 않은 매개 변수는 현재 정의 된 매개 변수에서 상속됩니다. 예를 들어, 부모 상태로 지정된 매개 변수를 공유하는 형제 상태로 이동할 수 있습니다. 매개 변수 상속은 공통 조상 상태 사이에서만 작동합니다. 형제로 전환하는 것은 아이로 전환하는 등, 당신에게 현재의 모든 매개 변수를 얻을 것이다, 당신에게 모든 부모를위한 매개 변수를 얻을 것이다

** UPDATE 내가이 일을하기 위해 찾은 유일한 방법은 만드는 것입니다

다음 업데이트.

$scope.editAccount = function (item) { 
     console.log("Editing Account"); 
     console.log(item); 
     $state.params.item = item; 
     //$state.go('edit', item); 
     $state.go('edit'); 
    }; 


    resolve: { 
     item: function() { 
      return $state.params.item; 
     } 
    }, 

답변

2

매개 변수를 상태로 전달하려면이 매개 변수를 상태의 url 옵션에 정의해야합니다. 원하지 않는 경우 params 옵션에서 params를 정의 할 수 있습니다.

$stateProvider.state('edit', { 
    url: '/edit', 
    params: { 
     login: null, 
     full_name: null, 
     member_since: null 
    }, 
    onEnter: function($stateParams, $state, $modal) { 
     // ... 
    } 
}); 
관련 문제