javascript - 将内部作用域变量绑定(bind)到外部作用域 "template"

Question

我在 AngularJS 中有一个 Transclusive 指令，它有自己的隔离范围。该范围包含 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>'
    };
);

})

我想在指令的“外部模板”中使用作用域变量 - 替换模板中的 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>

应该给我两个不同的奇特数字。这种方法不起作用(因为这里我们绑定(bind)到 Controller 的范围)。

答案 1 建议在 Controller 作用域中引入其他变量，并将它们单向或双向绑定(bind)到指令的作用域变量。如果没有其他办法，这可能是一个解决方法。但是如果我想在指令部分绑定(bind)变量，我就会遇到麻烦:

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

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

Answer 1

选项 1(单向绑定(bind))

在指令的返回部分:

scope: { 
  ScopeTobeAccessedFromOutside: '@',
}

在您的指令实现中

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

选项 2(2 路绑定(bind))

在指令的返回部分:

scope: { 
  ScopeTobeAccessedFromOutside: '=',
}

在您的指令实现中

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