Question

我在AngularJS中有一个翻译指令，它有自己独立的范围。范围包含transclusiveDirectiveScopeVariable。

myApp.directive('MyTransclusiveDirective', function () {
    return {
        transclude: true,
        replace: true,
        scope: {
            transcluseDirectiveScopeVariable: '='
        },
        link: function($scope, elem, attrs) {
            scope.transclusiveDirectiveScopeVariable = Math.random();
        },
        template: '<div class="fancy"><ng-transclude></ngtransclude></div>'
    };
);

}）

我想在＆＃34;外模板中使用范围变量＆＃34;指令 - 在模板中替换ng-transclusive的部分。

这是我的期望：

<div ng-controller="Controller">
    <my-transclusive-directive>
        <p>The first fancy random number is {{transclusiveDirectiveScopeVariable"}}!</p>
    </my-transclusive-directive>

    <my-transclusive-directive>
        <p>The second fancy random number is {{transclusiveDirectiveScopeVariable"}}!</p>
    </my-transclusive-directive>
</div>

应该给我两个不同的花哨数字。这种方法不起作用（因为这里我们绑定到Controller的范围）。

答案1建议在Controller的范围内引入其他变量，并将它们与指令的范围变量进行单向或双向绑定。如果没有其他工作，这可能是一种解决方法。但是如果我想在指令的部分中绑定变量，我就会遇到麻烦：

<div ng-controller="Controller">
    <my-transclusive-directive transclusiveDirectiveScopeVariable="x">
        <input type="text" ng-model="x" />
    </my-transclusive-directive>
</div>

解决这个问题的正确方法是什么？

Answer 1

选项1（单向绑定）

在你的指令的返回部分：

scope: { 
  ScopeTobeAccessedFromOutside: '@',
}

在你的指令实现中

<my-transclusive-directive scope-tobe-accessed-from-outside="{{ anyScopeName }}">
</my-transclusive-directive>
<!--- you can access the scope from outside now -->
{{anyScopeName}}

选项2（双向绑定）

在你的指令的返回部分：

scope: { 
  ScopeTobeAccessedFromOutside: '=',
}

在你的指令实现中

<my-transclusive-directive scope-tobe-accessed-from-outside="anyScopeName">
</my-transclusive-directive>
<!--- you can access the scope from outside now -->
{{anyScopeName}}

将内部范围变量绑定到外部＆＃34;模板＆＃34;

1 个答案:

选项1（单向绑定）

选项2（双向绑定）