javascript - 如何将 $scope 变量传递到自定义指令的字符串模板中？

Question

问题

• 我有一个使用 ng-repeat 构建的项目列表。
• 每个项目都有一个包含编辑/删除项目链接的上下文菜单。
• 上下文菜单是使用对象数组中的自定义 dropdown-list 指令构建的，例如 {title: "Link title", href: "/some-href"} .

我需要将 ng-href 的动态参数(在我的例子中是 project.id)传递到我在 ng- 中使用的指令模板中重复。我怎样才能实现这一目标？

这是我的一般性问题。我觉得我对 Angular JS 概念存在严重误解，希望得到您的帮助。

我尝试过的

我尝试将字符串数组传递到我的指令中，并且得到了如下未解析的 href:

/projects/%7B%7B%20project.id%20%7D%7D/edit

这是为什么？

projects-template.html

<li ng-repeat="project in data.projects">
    <a ng-href="/projects/{{ project.id }}">{{ project.title }}</a>
    <a dropdown-list="projectContextMenu"></a>

projects.controller.js

$scope.projectContextMenu = [
    {
      text: "Edit",
      href: "/projects/{{ project.id }}/edit"
    }, {
      text: "Delete",
      href: "/projects/{{ project.id }}/delete"
    }
  ];

我也尝试过

传递一个返回已解析字符串数组的函数，但出现无休止的递归错误:

10 $digest() iterations reached. Aborting!

怎么会这样？

projects-template.html

<li ng-repeat="project in data.projects">
    <a ng-href="/projects/{{ project.id }}">{{ project.title }}</a>
    <a dropdown-list="projectGetContextMenu(project.id)"></a>       

projects.controller.js

$scope.projectGetContextMenu = function(projectID){
    return [
        {
          text: "Edit",
          href: "/projects/" + projectID + "/edit"
        }, {
          text: "Delete",
          href: "/projects/" + projectID + "/delete"
        }
      ];
}

下拉指令代码

angular.module("ngDropdowns", []).directive("dropdownList", [
    "$compile", "$document", function($compile, $document) {
      var template;
      template =
        "<ul>"+
        "  <li ng-repeat='dropdownItem in dropdownList' ng-class='{ \"active\": dropdownModel && dropdownModel.value == dropdownItem.value }'>"+
        "    <a href='' ng-href='{{ dropdownItem.href }}' ng-click='itemSelect(dropdownItem)'>{{ dropdownItem.text }}</a>"+
        "</ul>";
      return {
        restrict: "A",
        replace: false,
        scope: {
          dropdownList: "=",
          dropdownModel: "="
        },
        controller: [
          "$scope", "$element", "$attrs", function($scope, $element, $attrs) {
            var $template, $wrap;
            $template = angular.element(template);
            $template.data("$dropdownListController", this);
            $element.addClass("dropdown_selected").wrap("<div></div>");
            $wrap = $element.parent();
            $wrap.append($compile($template)($scope));
            $scope.itemSelect = function(dropdownItem) {
              if (dropdownItem.href) {
                return;
              }
              angular.copy(dropdownItem, $scope.dropdownModel);
              $wrap.removeClass("dropdown__active");
            };
            $document.find("body").on("click", function() {
              $wrap.removeClass("dropdown__active");
            });
            $element.on("click", function(event) {
              event.stopPropagation();
              $wrap.toggleClass("dropdown__active");
            });
            $wrap.on("click", function(event) {
              event.stopPropagation();
            });
          }
        ]
      };
    }
  ])

Answer 1

您的第二种方法更正确，因为您需要根据上下文构造不同的 URL。但正如您所看到的，您进入了无休止的消化循环。

这是因为您每次都返回不同的数组引用

Angular 认为它是不同的，因此需要再次转动曲柄，再次调用您的函数，返回一个新数组，等等。

您的 projectGetContextMenu 函数需要缓存结果，并返回相同的引用。像这样:

var contextMenus = {};

$scope.projectGetContextMenu = function(projectID){
    if(!contextMenus[projectId]) {

      contextMenus[projectId] = [
        {
          text: "Edit",
          href: "/projects/" + projectID + "/edit"
        }, {
          text: "Delete",
          href: "/projects/" + projectID + "/delete"
        }
      ];
    }

    return contextMenus[projectId];
};