访问$ mdDialog控制器中的$ scope变量时出现问题 - AngularJs 1.X.X

时间:2017-04-04 18:07:05

标签: angularjs angularjs-scope angular-material angular-promise md-select

我正在使用$ mdDialog并且我指定了一个存在于另一个js文件中的Controller。

家长Js控制器:

$scope.AddDesignationPrompt = function(ev) {
    $mdDialog.show({
        controller: 'AddDesignationPromptController',
        templateUrl: './Employee/Views/AddDesignation.tmpl.html',
        parent: angular.element(document.body),
        targetEvent: ev,
        clickOutsideToClose:true,
        fullscreen: true // Only for -xs, -sm breakpoints.
    })
    .then(function(answer) {
        $scope.GetPriliminaryData();
    }, function() {
        $scope.status = 'You cancelled the dialog.';
    });
};

对话控制器:

app.controller('AddDesignationPromptController', function ($scope, $rootScope, $mdDialog, $window, HTTPService) {
    $scope.loadUpData = {
            State: [],
            Department: [],
            Designation: []
      };

      HTTPService.getPriliminaryRegData().then(function (result) {
            if ((result != undefined) && (result != null)) {

                $scope.loadUpData = {
                    State: [],
                    Department: result.Result.Department,
                    Designation: []
                };

                console.log("Inside");
                console.log($scope.loadUpData);

            }
        });

    console.log("Outside");
    console.log($scope.loadUpData);

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

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

    $scope.answer = function(answer) {
      $mdDialog.hide(answer);
    };
});

查看:

<md-dialog aria-label="Mango (Fruit)">
  <form ng-cloak>
    <md-toolbar>
      <div class="md-toolbar-tools">
        <h2>New Department</h2>
        <span flex></span>
        <md-button class="md-icon-button" ng-click="cancel()">
          <md-icon md-svg-src="./Employee/images/Close.svg" aria-label="Close dialog"></md-icon>
        </md-button>
      </div>
    </md-toolbar>
    <md-dialog-content>
      <div class="md-dialog-content">
        <p>Enter the New Department</p>
        <div class="controlItem">
            <md-select ng-model="select.designation" ng-change="onDesignationChange(select.designation)" tabindex="9">
                <md-option ng-repeat="key in loadUpData.Designation" value="{{key.DesignationId}}">{{key.Name}}</md-option>
            </md-select>
        </div>
      </div>
    </md-dialog-content>
    <md-dialog-actions layout="row">
      <span flex></span>
      <md-button ng-click="answer('not useful')">
       Not Useful
      </md-button>
      <md-button ng-click="answer('useful')">
        Useful
      </md-button>
    </md-dialog-actions>
  </form>
</md-dialog>

Inspect Element - Screenshot

它进入控制器级别,但它没有加载到md-select中。请帮助我如何在视图中加载集合。

1 个答案:

答案 0 :(得分:0)

您正在循环loadUpData.Designation,它始终设置为空数组[],因此不会显示任何内容。您HTTPService承诺解析中填充的唯一数据是loadUpData.Department,但您从不在HTML中打印。

如果结果中有Designation,则填充它,例如:

HTTPService.getPriliminaryRegData().then(function (result) {
  if (result && result.Result) {

    $scope.loadUpData = {
      State: [],
      Department: result.Result.Department,
      Designation: result.Result.Designation
    };

    console.log("Inside");
    console.log($scope.loadUpData);

  }
});