Question

我刚刚举例说明了我是如何尝试使用transclude数据绑定的。好吧，在从控制器范围绑定一个对象（消息）后，在指令的链接函数中将其“未定义”。

<html ng-app="myApp">
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>

        <script>
            angular.module('myApp', []).controller('myAppController', function($scope)
            {
                $scope.message = { text: 'hello'}
            });

            angular.module('myApp').directive('myDirective', function() {
                return {
                        restrict: 'E',
                        template: "<div><div ng-transclude></div></div>",
                        transclude: true,
                        scope: { message: "=" },
                        link: function (scope) {
                            // Its undefined here
                            console.log(scope.message);
                        }
                    };
            })
        </script>

    </head>

    <body ng-controller="myAppController">
        <my-directive>
            {{message.text}}
        </my-directive>
    </body>
</html>

任何帮助将不胜感激，谢谢

[编辑]

也许我不太清楚。其实我的代码有点：

Home.html中

对不起，也许我不太清楚。实际上我的代码是 KINDA ：

<html ng-app="myApp">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>

    <script>
                angular.module('myApp', []).controller('myAppController', function($scope)
                {
                    $scope.model = { id: 100, name: "name"}
                });

                angular.module('myApp').directive('myDirective', function() {
                    return {
                            restrict: 'E',
                            templateUrl: "Modal.html",
                            transclude: true,
                            scope: { model: "=" },
                            link: function (scope) {
                                // Its undefined here
                                console.log(scope.model);
                            }
                        };
                })
    </script>

</head>

<body ng-controller="myAppController">
    <my-directive>
        <div>
            id:<input type="text" ng-model="model.id" />
            name:<input type="text" ng-model="model.name" />
            <button class="btn btn-primary" ng-click="doIt()">do something</button>
        </div>
    </my-directive>
</body>
</html>

Modal.html

<div class="modal-header">
    <h3 class="modal-title">Edit modal</h3>
</div>
<div class="modal-body">
    <div ng-transclude>

    </div>
</div>
<div class="modal-footer">
    <button class="btn btn-primary" ng-click="btnModalGravar()">Gravar</button>
    <button class="btn btn-warning" ng-click="btnModalCancelar()">Cancelar</button>
</div>

我只是想知道为什么“console.log（scope.model）”在使用范围后在指令的链接函数中返回“undefined”：{model：“=”}

Answer 1

angular.module('myApp').directive('myDirective', function() {
                return {
                        restrict: 'E',
                        template: "<div><div ng-transclude></div></div>",
                        transclude: true,
                        scope: { message: "=" },
                        link: function (scope) {
                            }
                    };
            })

//Html
 <my-directive message="message">
            {{message.text}}
        </my-directive>

Answer 2

如果您尝试将某些数据传递给指令，那么这不是一个过渡而是一个孤立的范围。你几乎得到了它。只需使用您的指令：

<body ng-controller="myAppController">
    <my-directive message="message"></my-directive>

    <!-- This way you're referencing your $scope.message object, so it's like you've had:
    <my-directive message="{text: 'hello'}"></my-directive>
    -->
</body>

Transclusion 用于传递一些数据，但有些标记（即html，其他指令）。

如果您想在链接函数中使用被转换的内容，您应该将它用作此函数的第5个参数，如下所示：

// Directive excerpt
return {
        ...
        transclude: true,
        link: function(scope, el, attrs, ctrl, transclude) {
            var transcluded = transclude();
            console.log(transcluded);
        }
    };

// View excerpt
<my-directive message="message">
   <span>{{ message.text }}</span>
</my-directive>

Answer 3

您可以在角度文档Creating Custom Directives

中查看隔离指令的范围部分

无法获得transclude数据绑定工作

3 个答案: