Angular中dialog参数传递

Posted on | In |

Angular的官方文档

解决方案一

按照官方文档，在html中加入点击事件弹出对话框

1
2
3
4
//html
<md-button class="md-primary md-raised" ng-click="showAdvanced($event)"   >
	Alert Dialog
</md-button>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
//js
$scope.showAdvanced = function(ev) {
    $mdDialog.show({
      controller: DialogController, //又一个controller
      templateUrl: 'temp.html',
      parent: angular.element(document.body),
      targetEvent: ev,
      clickOutsideToClose:true,
      fullscreen: $scope.customFullscreen // Only for -xs, -sm breakpoints.
    })
    .then(function(answer) {
      $scope.status = 'You said the information was "' + answer + '".';
    }, function() {
      $scope.status = 'You cancelled the dialog.';
    });
  };
  
  function DialogController($scope, $mdDialog) {
    $scope.hide = function() {
      $mdDialog.hide();
    };
    $scope.cancel = function() {
      $mdDialog.cancel();
    };
    $scope.answer = function(answer) {
    	//一开始我并没有理解好这里的。$mdDialog.hide(answer);会返回一个值，就是answer，需要在对话框的模板（html）传入进来。
      $mdDialog.hide(answer);
    };
  }

将对话框的内容与原本页面的内容进行通话：可以在$mdDialog.show中添加local参数，这个参数将原controller中的数据传至对话框，就如上面的例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$scope.showAdvanced = function(ev) {
    $mdDialog.show({
      controller: DialogController, //又一个controller
      templateUrl: 'temp.html',
      parent: angular.element(document.body),
      targetEvent: ev,
      clickOutsideToClose:true,
      fullscreen: $scope.customFullscreen， // Only for -xs, -sm breakpoints.
      //添加一下参数用于传递
      locals:{
      	items : $scope.items
      }
    })
    .then(function(answer) {
      $scope.status = 'You said the information was "' + answer + '".';
    }, function() {
      $scope.status = 'You cancelled the dialog.';
    });
  };

接着就可以在对话框的controller找到items了,将它放在controller里的参数传进来

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function DialogController($scope, $mdDialog ,items ) {
  $scope.hide = function() {
    $mdDialog.hide();
  };
  $scope.cancel = function() {
    $mdDialog.cancel();
  };
  $scope.answer = function(answer) {
    console.log(items)//这样就输出成功了 
    items = 改变的值 //可以这么改变item
    $mdDialog.hide(answer);
  };
}
解决方案二

这种方式是添加的controller用原先的controller。这样就可以使用外层的controller了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
vm.newBooking = function(){
    vm.bookingliveInfo = {
        'codingLanguageList':vm.createCodingLanguageList[0],
        'projectType':vm.createProjectTypeList[0],
        'grade':vm.createGreade[0],
        'liveTime':moment().format('YYYY-MM-DD HH:mm:ss')
    }
    $mdDialog.show({
        controller: function () {
            return vm;
        },
        controllerAs: 'vm',
        clickOutsideToClose: false,
        preserveScope: true,
        templateUrl: temp.html'
    });
}
vm.createSchedule = function(){
    ScheduleService.addBooking(vm.bookingliveInfo).then(function success(result){
        toastr.success(result.msg);
        $mdDialog.hide();
        vm.getScheduleInfo();
        vm.bookingliveInfo = null;
    },function error(error){
        toastr.error(error);
    })
}