Question

我正在尝试创建一个可重用的父容器指令。我想要的是以下内容：

<parent title="Parent title">
    <child></child>
</parent>

我可以让子元素更改父级范围内的值。

我尝试过如下绑定（请参阅 this fiddle ）：

myApp.directive('parent', function() {
    return {
        scope: {'title': '@'},
        transclude: true,
        // Manually transclude so we set parent scope to be this scope.
        link: function(scope, element, attrs, ctrl, transclude) {
            transclude(scope.$new(), function(content) {
                element.append(content);
            });
        },
        restrict: 'EA',
        template: '<div><b>PARENT:</b> {{title}}</div>',
        controller: function($scope) {
            $scope.inherited = true;
            $scope.$watch('inherited', function(newValue, oldValue) {
                if(!newValue) {
                    console.log('Parent: inherited switched');
                }
            });
        }
    }
});

myApp.directive('child', function() {
    return {
        restrict: 'EA',
        scope:{
            inherited: '='
        },
        template: '<div><b>Child:</b> inherited attribute = {{inherited}}</div>',
        controller: function($scope) {
            // Why is inherited not bound to parent here?
            console.log($scope.inherited);
            // It obviously exists in the parent...
            console.log($scope.$parent.inherited);
        }
    }
});

根据我对the API的理解，使用inherited: '='设置对象哈希范围应绑定到父属性，但正如您在小提琴中看到的那样，它不会。

我有两个问题：

为什么inherited没有绑定到父属性？
如何实现此消息传递？

注意事项：

我不想使用require: '^parent'，因为这会在子节点上创建一个相当强的依赖关系（我可能想要创建一些可能的父容器和一些子指令和mix-and -match）。
我绝对不会在child指令中使用link来爬到$parent。这是一个黑客攻击，对于深度嵌套的指令通常不起作用。
我愿意在父母身上使用一些hackery。

感谢任何指导。

Answer 1

您可以这样做：

<child inherited="inherited"></child>

您实际传入的是继承属性，因为这是您在执行

时所寻找的内容

scope:{
        inherited: '='
    },

或者你可以这样做：

myApp.directive('child', function() {
return {
    restrict: 'EA',
    scope: false,

以便它使用它的父母的范围。

无论哪种方式，您都可能遇到绑定到基元的一些问题。你可能会通过创建一个继承的对象，传递对象，以及当你需要显示它时显示对象属性来节省很多麻烦：

JS：

$scope.inherited = {is: true};

HTML：

{{inherited.is}}

然后继续绕过整个物体。

http://jsfiddle.net/GQX9z/1/

如何将transcluded元素的scope属性绑定到parent？

1 个答案: