1

假设我有一些 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 不变。

如何使嵌入的元素直接引用父范围？

这是一个有问题的jsFiddle。

4

1 回答 1

6

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

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

fiddle

由于被嵌入的作用域原型继承自父作用域，所以被嵌入的作用域可以访问所有父作用域的属性。通过使用对象属性，“写入”到父范围属性。（使用原语时，“写入”会在子转入作用域上创建新属性，从而隐藏/隐藏同名的父作用域属性。）

于 2013-07-29T15:17:39.377 回答