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

Question

我一直在玩转 Angular Material，我想创建一个 $mdDialog，它允许用户输入信息，保存后，将更新绑定(bind)到 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 将在名称输入字段中以“默认”打开，但是如果我将 show() 参数更改为以下(关键区别在于将“范围:”换成“ 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 打开时名称输入字段为空白。

这个问题的设置很长:Why does the dialog template recognize $scope.obj when "scope: $scope.$new()", but it is not recognized when "controller: 'AppCtrl' "? 我认为这两种实现都为对话框提供了 AppCtrl 的范围。

Answer 1

• Dialog 总是被赋予一个独立的作用域
• 您可以使用依赖注入(inject)将数据从父 Controller 传递到对话框。

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.

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