Question

我有这样的事情：

<my-directive name="form"><div ng-if="form.$submitted"></div></my-directive>

并在我的指令中：

angular.directive('myDirective', function() {
    return {
        template: '<form name="{{ name }}" ng-transclude></form>',
        transclude: true,
        scope: {
            name: '@'
        },
        link: function(scope) {
            console.log(scope.form.$submitted); //works here
        }
    }
});

form.$submitted似乎没有在这里定义？但它是在指令范围内定义的吗？如何从HTML访问form.$submitted？

谢谢！

Answer 1

transcluded（带ng-transclude）内容的范围与指令的隔离范围不同。

您可以手动转换并将隔离范围应用于已转换的内容：

template: '<form name="{{ name }}"></form>',
transclude: true,
scope: {
   name: "@"
},
link: function(scope, element, attrs, ctrls, transcludeFn){
   transcludeFn(scope, function(contentClone){
     element.find("form").append(contentClone);
   });
}

但是对于你的指令的用户来说有点尴尬，因为现在他们有HTML引用了一些“魔术”变量（当然是由你的指令定义的），这些变量对于观察HTML的人来说并不明显：

<my-directive name="form">
   <pre>{{form}}</pre>
</my-directive>

此处，{{form}}所指的并不明显。

表单。$提交不适用于transcluded元素

1 个答案: