我可以使指令的排除范围与父指令相同吗

Question

假设我在angular中有一些html：

 <input type='text' ng-model='stuff' /> {{stuff}}
 <button class="primary" ng-click='dothestuff()'>Do the stuff</button>

控制器中有以下内容：

$scope.stuff = 'arf';
$scope.dothestuff = function () {
    $window.alert($scope.stuff);    
};

此代码将使我在输入中输入，并在按下按钮时输出。

一切正常

---

但现在我想创建一个指令，将元素封装在div中（因此它显示在深灰色背景中）。

我创建了一个指令，该指令将遍历元素并用div包装它们:

testapp.directive('wrapper', function () {
    return {
        restrict: 'E',
        replace: true,
        scope: false,
        transclude: true,
        template: '<div style="background:#666"><div ng-transclude></div></div>'
    };
});

但是，当然，这个指令会为被屏蔽的元素创建一个新的范围。input元素不再引用点击按钮时将获得输出的stuff属性。

我可以通过引用$parent作为：来实现它

 <input type='text' ng-model='$parent.stuff' /> {{stuff}}

但是，我不希望这样做。我希望在使用新指令包装时，尽可能不影响html。

如何使transcluded元素直接引用父作用域？

这是一个关于这个问题的jsFiddle。

Answer 1

与其试图让transcluded元素引用父作用域，不如使用对象属性：

$scope.obj = {stuff: 'arf'};

小提琴

由于transcluded作用域在原型上继承自父作用域，因此transluded作用域可以访问所有父作用域属性。通过使用对象属性，"写入"到父作用域属性。（使用基元时，"写入"会在子transcluded作用域上创建新属性，从而隐藏/隐藏同名的父作用域属性。）