从mdDialog获取嵌套的md-input-container变量

Question

我已经基于一些Demo创建了一个简单的Angular选项卡式mdDialog。其中一个选项卡包含一些由数组cfTypeArray填充的radiobuttons。同一个md-content中还有一个文本框。

当我选择其中一个radiobuttions时，功能＆＃34; rdbChange＆＃34;被调用并成功打印所选单选按钮的值。但是，文本框将被忽略。

rdbChange. Got selected radiobutton here: voicemail and textbox: undefined

此外，当我点击保存按钮时，似乎没有任何范围变量存在。

TypeError: Cannot read property 'test1' of undefined

HTML：

<div ng-controller="callforwardsController" class="md-padding dialogdemoBasicUsage" id="popupContainer" ng-cloak="" ng-app="MyApp">
    <div class="dialog-demo-content" layout="row" layout-wrap="" layout-margin="" layout-align="center">
    <md-button class="md-primary md-raised" ng-click="showTabDialog($event)">Add CF</md-button>
    </div>
    <div ng-if="status" id="status"><b layout="row" layout-align="center center" class="md-padding">{{status}}</b></div>

    <!-- Template voor tabdialog -->
    <script type="text/ng-template" id="tabDialog.tmpl.html"><md-dialog aria-label="Mango (Fruit)">
    <form>
    <md-toolbar>
  <div class="md-toolbar-tools">
    <h2>Test</h2>
    <span flex></span>
  </div>
</md-toolbar>
<md-dialog-content style="max-width:800px;max-height:810px; ">
  <md-tabs md-dynamic-height md-border-bottom>
    <md-tab label="TAB1">
        <md-content class="nofocus" ng-controller="callforwardsController">
            <md-input-container>
                <md-radio-group style="margin-left: -5px; margin-right: 15px;" ng-model="userpref.test1" ng-change="rdbChange()">
                    <md-radio-button class="nofocus" style="margin-left: 15px; display: inline-block;" ng-repeat="cfType in cfTypeArray" ng-value="cfType.value" aria-checked="true" ng-click="changedOption(cfType)" aria-label="{{ cfType.label }}">{{ cfType.label }}</md-radio-button>
                </md-radio-group>
            </md-input-container><br />
            <md-input-container id="phonenumber-container" style="margin-left: 15px;">
                <label>Voer een telefoonnummer in.</label>
                <input id="phonenumber" type="text" ng-model="userpref.test2" ng-disabled="callforward.isDisabled" ng-minlength="5" required="" value="{{ callforward.phonenumber }}"/>
            </md-input-container>
        </md-content>
    </md-tab>
    <md-tab label="TAB2">
      <md-content class="md-padding">
        bla bla bla
      </md-content>
    </md-tab>
  </md-tabs>
</md-dialog-content>

<!-- buttons -->
<md-dialog-actions layout="row">
  <span flex></span>
  <md-button ng-click="answer('cancel')" >
    Annuleren
  </md-button>
  <md-button ng-click="answer('save')" style="margin-right:20px;" >
    Opslaan
  </md-button>
</md-dialog-actions>
</form>
</md-dialog>
</script></div>

JS：

angular.module('MyApp',['ngMaterial', 'ngMessages', 'ngRoute', 'ngResource']).controller('callforwardsController', function($scope, $mdDialog){

<!-- Tabdialog -->
$scope.status = '  ';
$scope.customFullscreen = false;

<?php 
if(isset($cfu1)){
    if($cfu1 == 'voicemail'){
        echo "\$scope.callforward = {myVar: 'voicemail', phonenumber: '', isDisabled: true};";
    } else {
        echo "\$scope.callforward = {myVar: 'phonenumber', phonenumber: '$cfu1', isDisabled: false};";
    }
} else {
    echo "\$scope.callforward = {myVar: 'inactive', phonenumber: '', isDisabled: true};";
}
?>

$scope.showTabDialog = function(ev){      
    $mdDialog.show({
        controller: DialogController,
        templateUrl: 'tabDialog.tmpl.html',
        parent: angular.element(document.body),
        targetEvent: ev,
        scope: $scope,
        //preserveScope: true,
        clickOutsideToClose:true
    })
    .then(function(answer){
        $scope.status = 'You said the information was "' + answer + '".';

    }, function(){
        $scope.status = 'You cancelled the dialog.';
    });        
};

this.save = function (){
    this.showText = true;
    $mdDialog.cancel();
}

function DialogController($scope, $mdDialog){
    console.log($scope);
    $scope.hide = function(){
        $mdDialog.hide();
    };

    $scope.cancel = function(){
        $mdDialog.cancel();
    };

    $scope.answer = function(answer){
        if(answer == 'save'){
            console.log("THIS SHOULD BE SAVED " + $scope.userpref.test1 + ' ' + $scope.userpref.test2);
        }
        $mdDialog.hide(answer);
    };

    $scope.changedOption = function(){
        console.log("CHANGED OPTION");
    }
}

<!-- Verwerken van callforwards. -->
$scope.cfTypeArray = [];
$scope.cfTypeArray.push({label:"Inactief", name:"inactive", value:"inactive"});
$scope.cfTypeArray.push({label:"Voicemail", name:"voicemail", value:"voicemail"});
$scope.cfTypeArray.push({label:"Nummer", name:"phonenumber", value:"phonenumber"});

$scope.init = function () {
    console.log("WITHIN INIT");
};

    $scope.rdbChange = function() {
        console.log("rdbChange. Got selected radiobutton here: " +     $scope.userpref.test1 + " and textbox: " + $scope.userpref.test2)
    };

});

有没有更好的方法来共享/检索这些变量？

Answer 1

看起来我可以在 $ scope.answer 部分中检索它们，如下所示：

var data = $('#callforwardContent').scope().callforward;
console.log(data.myVar);
console.log(data.phonenumber);