Question

Plunkr：http://plnkr.co/edit/9LcYbn1468miu5McgPqR?p=preview

我可以将表单添加到传入的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);

这很好用，并且动态地实例化我想要的指令而不用担心。现在，我有另一个指令，由另一个面板组成，内部是另一个指令。两者都有孤立的范围。所以我有：

Panel
   Directive
      Panel
         OtherDirective

我想将附加参数选项传递给“其他指令”，以便“指令”可以访问“其他指令”中的数据。正如您在上面的面板代码中看到的那样，这些选项现在被转换为json并由面板“硬编码”。但是这个额外的范围变量是一个字符串，结果如下：

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

然而，变量'VariableInDirective'不受OtherDirective的约束。以下是这两个指令的一些代码：

    (function (ng, app)
    {

        "use strict";

        app.directive(
            "directive",

            function ()
            {
                return {
                    scope: {
                        options: '=',
                    },
                    controller: function ($scope)
                    {
                        $scope.Comment;

                        $scope.OtherDirectiveOptions=
                        {
                            showcreatebutton: false,

                        };

                        $scope.OtherDirectivePanelOptions = {
                            Id: $scope.options.Id,
                            Title: $scope.options.Title + " Comment",
                            Directive: "otherdirective",
                            DirectiveOptions: $scope.OtherDirectiveOptions, //This gets serialized by the panel and essentially "hard coded"
                            test: true,
                            AdditionalOptions: { "scopevariabletobindto": "VariableInThisScope" }
                        }

                        $scope.test = function ()
                        {
//Function used to see if the variable in this scope was set
                            debugger;
                        }
                    },
                    templateUrl: function (elem, attr)
                    {
                        return '/Directive.html';
                    },
                }
            });
    })(angular, App);

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

   (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属性作为一个函数传递，并且它可以使用＆amp;符号。

Answer 1

您的问题是Angular的命名约定。属性必须使用kebap-case，因此每个单词都通过supn连接，但这些单词在范围方面被转换为camelCase表示。因此，在将属性名称写入HTML标记之前，应将其从camel转换为kebap。

例如你不应该这样做：

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

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

取而代之的是：

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

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

在两个动态实例化的指令之间共享范围变量

1 个答案: