0

在一个遗留项目中，我想创建一个使用 transclude 的新指令。

指令代码的精简版本是：

app.directive('controlWrap', function() {
    return {
        restrict: 'E',
        transclude: true,
        scope: { label: "@" },
        templateUrl: "control-wrap-template.html"
    }
})

模板是：

<div>
    <label>{{label}}</label>
    <div>
        <ng-transclude></ng-transclude>
    </div>
</div>

该指令是这样使用的

<control-wrap label="Just a example">
    <input type="text" ng-model="input" />
</control-wrap>
Test: {{input}}

我知道解决方法是在范围内使用对象而不是原始值（ng-model 内 ng-transclude）。但这对我来说是没有选择的。这是一个丑陋的、编码不良的遗留代码，直接依赖于作用域上的这些属性。

我可以在指令中做些什么来使 html 无需更改即可工作吗？

4

2 回答 2

0

您可以手动嵌入（而不是使用ng-transclude）并将scope.$parent所需的任何范围（在您的情况下是 ）应用于嵌入的内容：

transclude: true,
scope: { label: "@" },
template: '<div>\
             <label>{{label}}</label>\
             <placeholder></placeholder>\
           </div>',
link: function(scope, element, attrs, ctrls, transclude){
   transclude(scope.$parent, function(clone){
      element.find("placeholder").replaceWith(clone);
   });
}

演示

于 2015-05-18T05:20:42.967 回答
-1

最干净的解决方案是进行一些重构并传递一个对象而不是原始值，但如果由于某种原因你不能这样做，你也没有选择余地。

但是，我不会推荐任何这些选项

1）从父范围绑定input，防止在写入时在子范围上创建新值 - 但请记住，访问父范围会损害指令的可重用性。角度 1.2：

<input type="text" ng-model="$parent.input" />

角 1.3：

<input type="text" ng-model="$parent.$parent.input" />

（不同之处在于嵌入范围的父级是 1.3 中的指令范围）

2）创建某种包装对象并传递它而不是原始值

$scope.inputWrapper = {};
Object.defineProperty($scope.inputWrapper, 'input', {
    get: function() { return $scope.input },
    set: function(newValue) { $scope.input = newValue; }
})

并将其传递给指令。但同样，我会做一些重构。

于 2015-05-18T01:37:27.147 回答