Angular 的 $mdDialog 中使用了什么范围

Question

我一直在研究 Angular Material，我想创建一个 $mdDialog 允许用户输入信息，保存后将更新与 ng-repeat 相关的对象。

在尝试让它工作并为 mdDialog.show() 尝试不同的参数时，我对正在使用的范围感到困惑 when/why。

这是第一个实现：

(function () {'use strict';

angular.
  module('myApp', ['ngMaterial']).
  controller('AppCtrl', AppCtrl);

function AppCtrl($mdDialog, $scope) {
    $scope.lister = [{name:'Matt'},{name:'Steve'}];  
    $scope.showDialog = showDialog;

  function showDialog(evt) {
      $scope.obj = {name:'default'};
      $mdDialog.show({
      targetEvent: evt,
      scope: $scope.$new(),
      template:
        '<md-dialog>' +
        '  <md-content><md-input-container>'+
        '  <label>Name</label>'+
        '  <input ng-model="obj.name">' +
        '  </md-input-container></md-content>' +
        '  <div class="md-actions">' +
        '    <md-button ng-click="close(obj)">' +
        '      Save' +
        '    </md-button>' +
        '  </div>' +
        '</md-dialog>'
    }).then(function(objs){$scope.lister.unshift(objs)});
  }

    $scope.close = function(objs){

        $mdDialog.hide(objs);   
    }
}

}());

以上代码的行为是 mdDialog 将在名称输入字段中以 "default" 打开，但是如果我将 show() 参数更改为以下（关键区别在于将 "scope:" 换成"controller:"):

  function showDialog(evt) {
      $scope.obj = {name:'default'};
      $mdDialog.show({
      targetEvent: evt,
      controller: 'AppCtrl',
      template:
        '<md-dialog>' +
        '  <md-content><md-input-container>'+
        '  <label>Name</label>'+
        '  <input ng-model="obj.name">' +
        '  </md-input-container></md-content>' +
        '  <div class="md-actions">' +
        '    <md-button ng-click="close(obj)">' +
        '      Save' +
        '    </md-button>' +
        '  </div>' +
        '</md-dialog>'
    }).then(function(objs){$scope.lister.unshift(objs)});
  }

第二个实现的行为是 mdDialog 打开时名称输入字段为空白。

这个问题的设置很长：为什么对话框模板在"scope: $scope.$new()"时识别$scope.obj，但在"controller: 'AppCtrl'"时不识别？ 我认为这两种实现都为对话框提供了 AppCtrl 的范围。

Answer 1

对话框总是被赋予一个独立的范围
您可以使用依赖注入将数据从父控制器传递到对话框。

function AppController($scope, $mdDialog) {
    var message='message from parent';    
    $scope.showDialog = showDialog;
    $scope.items = [1, 2, 3];
    
  
    function showDialog($event) {
       var parentEl = angular.element(document.body);
       $mdDialog.show({
         parent: parentEl,
         targetEvent: $event,
         templateUrl:'templateFile.html',
         locals: {
           items: $scope.items
         },
         message:message
         controller: DialogController
      });
      function DialogController($scope, $mdDialog, items,message) {
        $scope.items = items;
        $scope.message = message;
        $scope.closeDialog = function() {
          $mdDialog.hide();
        }
      }
}

在第一种情况下，您使用

将对象添加到对话框的独立范围

$scope.obj = {name:'default'} and its available as obj.name on yr view.

在第二种情况下，您将对话框的控制器声明为 'AppCtrl'，但您尚未在父控制器内的任何地方定义它，因此您看不到任何内容。 AppCtrl 未定义。

Answer 2

如果你想使用调用范围；你可以像这样传递 'isolateScope' 参数：

$mdDialog.show({
    ....,
    isolateScope: false
});

Angular 的 $mdDialog 中使用了什么范围

What Scope is being used in Angular's $mdDialog

javascript

angularjs

angular-material