Question

我有一个关于如何将范围传递给从指令呈现的模板的问题。这似乎应该是如此直接，但不知何故，我很难让它工作。

我的HTML（为简洁而简化）如下：

<div ng-app="myApp">
  <md-content>
    <!-- strangely TestController as tc doesnt work -->
    <div ng-controller="TestController">
      <div ng-click="showDialog();">Show</div> <!-- this also doesnt seem to work.. -->
    </div>
  </md-content>
</div>

然后是应用程序（包含在index.html上的脚本标记中）：

// app -- using components
var app = angular.module('ctrlApp', 
  ['components', 'ngMaterial']);

// removed app.config from ngMaterial for brevity

该应用程序包含一个控制器，该控制器具有显示mdDialog的功能：

//controller
app.controller('TestController', function($scope, $log, $mdDialog) {
  $scope.items = [{'title': 1},{'title': 2}];
    // open modal
    $scope.showDialog = function() {
        $mdDialog.show({
            templateUrl: 'dialog.html',
            parent: angular.element(document.body),
            clickOutsideToClose:true,
            controller: function() {
                // scope from parent persists here as expected
                console.dir($scope.items);

                // used to wire up dialog specific UI behavior
                $scope.cancel = function() { $mdDialog.hide(); }
            }
        });
    };
});

Dialog.html只是在模式中呈现指令：

<md-dialog aria-label="test">
  <form ng-cloak>
  <!-- rendering a directive here -->
    <my-directive></my-directive>
  </form>
</md-dialog>

最后，回到应用程序，这是指令：

// link up a directive that is rendered in the model form
var d = angular.module('components', []);
d.directive('myDirective', function() {

  function link(scope, element, attributes ) { 
    console.log("scope.items are ", scope.items); }

    return({
      restrict: "E",
      controller: 'TestController',
      link: link,
      templateUrl: 'directive.html',
    });
});

最后是directive.html模板：

<div>
  <h1>my Directive template</h1>
  <pre> Empty!: {scope.items}</pre>
</div>

我很困惑如何将TestController创建的范围放到指令呈现的模板中。它一直很好地工作直到＆＃39;链接＆＃39;功能但不在指令的模板中......

非常感谢任何建议！

由于 - X

Answer 1

你在directive.html，

中犯了错误

您的代码：

<div>
  <h1>my Directive template</h1>
  <pre> Empty!: {scope.items}</pre>
</div>

预期代码：

    <div>
      <h1>my Directive template</h1>
      <pre> Empty!: {{scope.items[0]}}</pre> //Here you need to pass Array index
    </div>

我在这里给你运行代码：

 <!DOCTYPE html>
    <html>

    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" href="bower_components/angular-material/angular-material.min.css" media="screen" title="no title" charset="utf-8">
        <script src="bower_components/angular/angular.min.js" charset="utf-8"></script>
        <script src="bower_components/angular-animate/angular-animate.min.js" charset="utf-8"></script>
        <script src="bower_components/angular-aria/angular-aria.min.js" charset="utf-8"></script>
        <script src="bower_components/angular-messages/angular-messages.min.js" charset="utf-8"></script>
        <script src="bower_components/angular-material/angular-material.js" charset="utf-8"></script>
    </head>

    <body>
        <div ng-app="ctrlApp">
            <md-content>
                <!-- strangely TestController as tc doesnt work -->
                <div ng-controller="TestController">
                    <div ng-click="showDialog();">Show</div>
                    <!-- this also doesnt seem to work.. -->
                </div>
            </md-content>
        </div>
        <script type="text/javascript">
            /** Own Module **/
            var d = angular.module('components', []);
            d.directive('myDirective', function() {

                function link(scope, element, attributes) {
                    console.log("scope.items are ", scope.items);
                }

                return ({
                    restrict: "E",
                    controller: 'TestController',
                    link: link,
                    template: '<div>\
      <h1>my Directive template</h1>\
      <pre> Empty!: {{items[0]}}</pre>\
    </div>',
                });
            });
            var app = angular.module('ctrlApp', ['components', 'ngMaterial']);

            app.controller('TestController', function($scope, $log, $mdDialog) {
                $scope.items = [{
                    'title': 1
                }, {
                    'title': 2
                }];
                // open modal
                $scope.showDialog = function() {
                    $mdDialog.show({
                        template: '<md-dialog aria-label="test">\
      <form ng-cloak>\
        <my-directive></my-directive>  </form>\
    </md-dialog>',
                        parent: angular.element(document.body),
                        clickOutsideToClose: true,
                        controller: function() {
                            // scope from parent persists here as expected
                            console.dir($scope.items);

                            // used to wire up dialog specific UI behavior
                            $scope.cancel = function() {
                                $mdDialog.hide();
                            }
                        }
                    });
                };
            });
        </script>
    </body>

    </html>

Answer 2

如果您想将范围传递给模板，请尝试使用此类

在 Dialog.html 中

在指令中添加以下行

返回（{ 限制：“E”， controller：'TestController'，范围：{ 项目： '=' }，链接：链接， templateUrl：'directive.html'， }）;

希望这有帮助。

如果您想将范围传递给$ mdDialog，请查看以下链接。 https://github.com/angular/material/issues/1531

如何在组件化的Angular应用程序中保留范围，该应用程序包含一个提供自定义指令的对话框

2 个答案: