Angular的$ mdDialog中使用了什么Scope

Question

我一直在使用Angular Material,我想创建一个$ mdDialog,允许用户输入信息,保存后,将更新绑定到ng-repeat的对象.

在试图让这个工作并尝试mdDialog.show()的不同参数时,我很困惑什么时候/为什么使用范围.

这是第一个实现:

(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将在Name输入字段中以"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将打开,并为Name输入字段留空.

对于这个问题,这是一个很长的设置:为什么对话框模板在"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未定义.