Javascript 在两个动态实例化的指令之间共享作用域变量

普朗克：

我可以将表单添加到传入的options参数内的变量中，但我希望将其绑定到options参数内以外的其他对象

我有一个创建面板的面板指令。作为面板选项的一部分，我可以指定面板应动态调用的指令：

(function (ng, app)
{

    "use strict";

    app.directive(
        "panel",

        function ($compile)
        {
            return {
                scope: {
                    options: '=',
                },
                link: function(scope, element, attrs)
                {
                    el = angular.element('<' + scope.options.Directive + ' options=\'' + JSON.stringify(scope.options.DirectiveOptions) + '\' ' + additionalOptionsString + '></>');

                    element.find(".panel-body").append(el);

                    $compile(el)(scope);
                },
                templateUrl: function (elem, attr)
                {
                    return '/Panel.html';
                },

            }
        });
})(angular, app);

我想向“Other Directive”传递一个额外的参数选项，以便“Other Directive”可以访问“Other Directive”中的数据。正如您在上面的面板代码中所看到的那样，这些选项目前正在转换为json并由面板进行“硬编码”。但这个额外的范围变量是一个字符串，结果如下：

<OtherDirective options='{"hardCodedJson": "Value"} ' scopeVariableToBind='VariableInDirective'></OtherDirective> 

另一个指令，它有一个表单，我想绑定到上面的变量范围。我基本上希望能够将变量链接到嵌套控件上，以便可以按层次访问它们：

   (function (ng, app)
    {

        "use strict";

        app.directive(
            "otherdirective",

            function ($compile)
            {
                return {
                    scope: {
                        options: '=',
//Have tried scopevariabletobindto: '=form': no luck, have tried a lot of different combinations.
                        scopevariabletobindto: '=',
                    },

                    controller: function ($scope, $element)
                    {

                        $scope.id = $element.parent()[0].id;
//I want this form in this directive to bind to scopevariabletobindto.
                        $scope.form = {};
                       //Have even tried to set it manually like $scope.scopevariabletobindto = { "test" : "test"} with no luck

                    templateUrl: function (elem, attr)
                    {
                        return '/OtherDirective.html';
                    },
                }
            });
    })(angular, app);

我想将此表单绑定到传递给“scopevariabletobindto”的范围变量，但似乎根本无法绑定它。你知道为什么吗

编辑：

---

看起来您实际上可以将form属性作为函数传递，并且它使用&symbol工作

您的问题是命名角度的约定。属性必须使用

kebap大小写

，因此每个单词都通过一个hypen连接起来，但这些词在范围上被转换为

camelCase

表示。因此，在将属性名写入HTML标记之前，应该将其从camel转换为kebap

例如，您不应该执行以下操作：

# HTML
<div scopeVariableToBeDefined=".."></div>

# JS
... 
scope: {
   scopeVariableToBeDefined: "="
}

#HTML
#JS
... 
范围：{
scopeVariableToBeDefined:“”
}

相反，你应该：

# HTML
<div scope-variable-to-be-defined=".."></div>

# JS
... 
scope: {
   scopeVariableToBeDefined: "="
}

#HTML
#JS
... 
范围：{
scopeVariableToBeDefined:“”
}

这两个指令的公共服务如何？这是一个选项，我想把它作为一个解决办法，但我很好奇是否可以通过指令而不添加“中间人”。如果我不必使用服务，它更通用。谢谢你看这个问题！我已经搔头好几天了！如果你把你的问题简化成一个小问题，会更容易些。谢谢，伙计们。这项服务是管理两部分之间数据的正确方法，无论是控制器还是指令。你在你的Plunker中哪里进行转换？我看不出来。此外，多个HTML属性之间没有空格，因此这也会失败。

# HTML
<div scopeVariableToBeDefined=".."></div>

# JS
... 
scope: {
   scopeVariableToBeDefined: "="
}

# HTML
<div scope-variable-to-be-defined=".."></div>

# JS
... 
scope: {
   scopeVariableToBeDefined: "="
}