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将打开＆＃34;默认＆＃34;在名称输入字段中，但如果我将show（）参数更改为以下（键差异是交换＆＃34;范围：＆＃34;对于＆＃34;控制器：＆＃34;）：

  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输入字段留空。

对于这个问题，这是一个很长的设置：为什么对话框模板在＆＃34;范围：$ scope。$ new（）＆＃34;时识别$ scope.obj，但是当它无法识别时＆＃34;控制器：＆＃39; AppCtrl＆＃39;＆＃34;？我认为这两种实现都为对话框提供了AppCtrl的范围。

Answer 1

对话框总是有一个孤立的范围
您可以使用依赖注入从父控制器向对话框传递数据。

url(r'^user/(?P<username>[\w.@+-]+)/foo', 'myapp.views.foo')

在第一种情况下，您使用

将对象添加到对话框的隔离范围

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();
        }
      }
}

在第二种情况下，您将对话框的控制器声明为“AppCtrl”，但是您没有在父控制器内的任何位置定义它，因此您没有在视图上获得任何内容。 AppCtrl未定义。

Answer 2

如果你想使用调用范围;你可以通过'isolateScope＆＃39;像这样的参数：

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

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

2 个答案: