Question

我正在使用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>

请建议任何更改以实现此目的。

Answer 1

范围必须是真实的＆＃34;范围不仅仅是一个数据对象。

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

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

在文档中有一个locals参数似乎是替代它，但我不知道注入值的方式/位置......

locals: scopeObj

Answer 2

以下是修改后的Plunk的链接。基本上，你在控制器中注入“locals”

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

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

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

2 个答案: