javascript - bool 值未在 Angular 中传递

Question

我试图在这里做一些相对简单的事情，将 bool 变量 multiExpandable 传递到由我的指令创建的递归树中。该变量稍后由我的服务评估。在我的服务中，无论出于何种原因，它总是返回为未定义。

我不知道为什么要这样对我!应用程序变量接受字符串对象，并且从字面上看，执行相同的操作，并且绝对没问题。我的代码如下，请注意，其中很多内容已被删除，以便简单地向您展示重要的内容。为什么会发生这种情况？

我的指令:

.directive("navigation", function() {
          return {
                restrict: 'E',
                replace: true,
                scope: {
                    menu: '=',
                    multiExpandable: '=',
                    application: '=',
                },
                controller: function($scope) {
                    $scope.toggleExpand = NavigationService.toggleExpand;
                },

              ...

            }

我的模板:

<ul style="list-style: none">
<li ng-repeat="node in menu.Folders">
    {{multiExpandable}}
    <i class="fa" ng-click="toggleExpand(node, application, menu, multiExpandable)"></i>
    <navigation menu="node" application="application" multiExpandable="multiExpandable"    ng-show="node.expanded == true"></navigation>
</li>
</ul>

指令的调用位置:

<navigation class="nav tree" menu="applications[currentApplication].Menu" application="currentApplication" multiExpandable="expandable"></navigation>

以及服务中的值(控制台日志语句将其返回为未定义):

_toggleExpand = function (application, multiExpandable) {

                    //some code

                    console.log("in TOGGLE EXPAND - multiExpandable:");
                    console.log(multiExpandable);

                    //some code
 }

Answer 1

您的指令属性声明是驼峰命名法，因此您需要在 HTML 中添加破折号，如下所示:

multi-Expandable="multiExpandable"

注意 Angular :

• 从 HTML 元素/属性的前面删除 x- 和 data-，并且
• 将使用 :、- 或 _ 分隔名称的 HTML 属性转换为驼峰命名法。

您可以在这里阅读更多相关信息:

https://docs.angularjs.org/guide/directive