Angular Material 中的 md-dialog 不接受隔离范围答案

【问题标题】：md-dialog in Angular Material not accepting isolated scopeAngular Material 中的 md-dialog 不接受隔离范围
【发布时间】：2015-07-17 07:12:38
【问题描述】：

我正在使用 Angular Material Dialog 来根据我的数据内容生成弹出窗口。我正在使用 ng-repeat 创建按钮，在其单击时会生成对话框。 但我无法将单个对象作为范围注入控制器。这是Plunker的链接

代码文件如下：

app.js

    var app = angular.module('myApp', ['ngMaterial']);
app.controller('mainCtrl', function($scope,$mdDialog) { 
  $scope.siteData = [{
    Name: 'Google',
    URL: 'https://www.google.com'
  }, {
    Name: 'Yahoo',
    URL: 'https://www.yahoo.com'
  }, {
    Name: 'Rediff',
    URL: 'https://www.rediff.com'
  }];
$scope.showDialog = function(ev,scopeObj) {
            $mdDialog.show({
          //template: 'myModal',
          template:  '<md-dialog>' +
                    '  <md-dialog-content>' +
                    ' {{URL}}    ' +
                    '  </md-dialog-content>' +
                    '</md-dialog>',
          scope:scopeObj,
          targetEvent: ev,
          clickOutsideToClose :true,
          preserveScope :true,
          clickOutsideToClose:true,
        });
      };
});

index.html

<html lang="en" ng-app="myApp">
<head>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=RobotoDraft:300,400,500,700,400italic">
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.10.0/angular-material.css">
  <meta name="viewport" content="initial-scale=1" />
</head>
<body  ng-controller="mainCtrl">
  <div ng-repeat="site in siteData">
 <md-button class="md-raised md-primary" ng-click = "showDialog($event,site)">{{site.Name}}</md-button>
  </div>
  <!-- Angular Material Dependencies -->
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.10.0/angular-material.js"></script>
  <script src="app.js"></script>
</body>
</html>

请提出任何更改以实现此目的。

【问题讨论】：

标签： angularjs dialog angular-material isolate-scope

【解决方案1】：

范围必须是“真实”范围，而不仅仅是数据对象。

您应该使用控制器来传递数据。

controller: function($scope){ $scope.URL=scopeObj.URL; },

在文档中，有一个 locals 参数似乎可以替代它，但我不知道这些值是如何/在哪里注入的......

locals: scopeObj

【讨论】：

【解决方案2】：

这里是修改后的Plunk 的链接，可以按预期工作。基本上，您在控制器中注入“本地人”

locals:{URL: scopeObj.URL},
controller: function($scope, URL){$scope.URL = URL;},

并在控制器中，将注入的值获取到本地 $scope。

【讨论】：