0

나는 내가 MD-대화 상자에 전달하는 데 사용하고이 템플릿을 가지고 :AngelsJS의 대화 상자에서 md-select ng-model 값을 저장하는 방법은 무엇입니까?

ShowDialog를 기능 :

$scope.showDialog = function(element) { 
var parentEl = angular.element(document.body); 
$mdDialog.show({ 
    template: element, 
    scope: $scope, 
    preserveScope: true, 
    parent: parentEl, 
    clickOutsideToClose: true, 
    controller:function($scope) { 
    $scope.answer = null; 
    } 
    }); 
} 

가 난 그냥 NG를받은 ShowDialog를 기능

$scope.showDialog(`<div class="md-dialog-container" id="functionality"> 
    <md-dialog aria-label="Dialog"> 
    <md-input-container> 
    <label>Who do you want to assign to build functionality?</label> 
     <md-select ng-model="startAppController.fluff"> 
     <md-optgroup label="Select an Employee"> 
      <md-option ng-value={{employee.name}} ng-repeat="employee in staff" ng-selected="true">{{employee.name}}</md-option> 
     </md-optgroup> 
     </md-select> 

    </md-input-container> 
<div> 
    <md-input-container flex-gt-xs> 
    <md-button type="submit" class="md-raised md-primary" ng-click="startAppController.assign()">Assign Work!</md-button> 
    </md-input-container> 
    </div> 
    </md-dialog> 
</div>`); 

를 호출 -click 부분이 작동하므로 실제로 assign() 함수를 호출 할 수 있습니다. 그러나, 나는 assign()에 변수를 전달할 수 없으며 md-select box에서 "fluff"변수에 접근 할 수도 없다.

범위 전체가이 범위에서 어떤 역할을하는지 확신 할 수 없지만 대부분 작동하는 것처럼 보입니다. 나는 그 fluff 변수에 접근 할 수 없다.

+0

내 대답에 대한 제안이 있으십니까? – nextt1

답변

0

먼저 scope을 주 컨트롤러에서 대화 컨트롤러로 전달하고 preserveScope을 사용하는 대신 locals 속성을 사용하여 데이터를 전달해야합니다.

둘째, 대화 상자의 컨트롤러에서 대화 상자를 취소하거나 확인하려면 $mdDialog.cancel()$mdDialog.hide() 메서드를 구현해야합니다. 이러한 메서드에서 전달되는 모든 인수는이 대화 상자를 호출하는 컨트롤러에서 액세스 할 수 있습니다.

세 번째로 $mdDialog.show()을 반환하고 promise을 반환합니다. 이제 then 메서드를 사용하여 원하는대로 약속을 처리하십시오.

여기 여기에 작업 Example 인 자바 스크립트

$scope.showDialog = function(element) {  
    var parentEl = angular.element(document.body); 

return $mdDialog.show({ 
    template: element, 
    locals: { data: "Pass Any Variable"}, 
    parent: parentEl, 
    clickOutsideToClose: true, 
    controller: function($scope, data) { 
     $scope.fluff = []; 
     $scope.data = data; 
     $scope.staff = { 
     0: {name: "John Doe"}, 
     1: {name: "Lorem Ipsum"}, 
     2: {name: "Random Dude"}, 
     3: {name: "Kid"} 
     }; 
     $scope.cancel = function(){ 
     $mdDialog.cancel(); 
     } 
     $scope.submit = function(){ 
     $mdDialog.hide($scope.fluff); 
     } 
    } 
    }); 
} 

$scope.openDialog = function(){ 
$scope.showDialog(`<div class="md-dialog-container" id="functionality"> 
<md-dialog aria-label="Dialog"> 
<md-input-container> 
<label>Who do you want to assign to build functionality?</label> 
    <md-select multiple ng-model="fluff"> 
     <md-option ng-value="employee.name" ng-repeat="employee in staff">{{employee.name}}</md-option> 
    </md-select> 

</md-input-container> 
{{data}} 
{{fluff}} 
<div> 
<md-input-container flex-gt-xs> 
<md-button class="md-raised md-primary" ng-click="submit()">Assign Work!</md-button> 
<md-button class="md-raised md-primary" ng-click="cancel()">Back</md-button> 
</md-input-container> 
</div> 
</md-dialog> 
</div>`).then(function(response){ 
    $scope.data = response; 
}, function(response){ 
    $scope.data = "cancelled"; 
}); 
} 

입니다.