从 AngularJS 中的指令访问 $scope

Question

由于我们缺乏使用 AngularJS 进行开发的专业知识，我们在开发过程中遇到了另一个障碍。

我们正在开发一个 Angular/Web API 应用程序，其中我们的页面仅包含一个交互式 SVG 图，当用户将鼠标悬停在 Angular 指令中的特定 SVG 标记上时显示数据。

应用程序中目前有两个自定义指令。

1. 指令一 - 将 SVG 文件加载到网页中
2. 指令二 - 添加 SVG 元素悬停事件/数据过滤器

指令一：

//directive loads SVG into DOM
angular.module('FFPA').directive('svgFloorplan', ['$compile', function  ($compile) {
return {
    restrict: 'A',

    templateUrl: 'test.svg',
    link: function (scope, element, attrs) {

        var groups = element[0].querySelectorAll("g[id^='f3']")
        angular.forEach(groups, function (g,key) {
            var cubeElement = angular.element(g);
            //Wrap the cube DOM element as an Angular jqLite element.
            cubeElement.attr("cubehvr", "");
            $compile(cubeElement)(scope);
        })
    }
}
}]);

SVG 图包含具有唯一标识符的标签，即：

<g id="f3s362c12"></g>

指令二从与每个 SVG 标签 ID 对应的注入服务加载 JSON 数据。

 //filters json based on hover item
 dataService.getData().then(function(data) {
    thisData = data.filter(function (d) {
    return d.seatId.trim() === groupId
 });

如上所示，指令二还添加了一个悬停事件函数，根据悬停的标签过滤 JSON 数据。

IE：如果用户将鼠标悬停在 上，指令中的过滤器将返回此 JSON 记录：

{"Id":1,
 "empNum":null,
 "fName":" Bun E.",
 "lName":"Carlos",
  ...
 "seatId":"f3s362c12 ",
 "floor":3,
 "section":"313 ",
 "seat":"12 "}

指令二：

//SVG hover directive/filter match json to svg
angular.module("FFPA").directive('cubehvr', ['$compile', 'dataService',     function ($compile, dataService) {
return {
    restrict: 'A',
    scope: true,
    link: function (scope, element, attrs) {

        //id of group 
        scope.elementId = element.attr("id");
        //alert(scope.elementId);
        var  thisData;
        //function call
        scope.cubeHover = function () {

            //groupId is the id of the element hovered over.
            var groupId = scope.elementId;

            //filters json based on hover item
            dataService.getData().then(function(data) {
            thisData = data.filter(function (d) {
                return d.seatId.trim() === groupId
            });
              //return data.seatId === groupId
              scope.gData = thisData[0];
              alert(thisData[0].fName + " " + thisData[0].lName + " " +   thisData[0].deptId);  
            });
            //after we get a match, we need to display a tooltip with   save/cancel buttons.
            $scope.empData = $scope.gData;
        };
        element.attr("ng-mouseover", "cubeHover()");
        element.removeAttr("cubehvr");
        $compile(element)(scope);
    }
    //,
    //controller: function($scope, $element){
    // $scope.empData = $scope.gData;
    //}
  }
}]);

我们现在遇到的问题是（除了拥有最少的 Angular 经验和面临一个独特而困难的实现问题之外）是我们正在尝试实现一种使用 div 标签和 Angular 范围变量创建工具顶的方法可以在用户将鼠标悬停在 SVG 标记元素上时显示（而不是在下面的 Plunker POC 链接中演示的 Javascript 警报）。

由于数据是由指令驱动的，并且指令已经将“cubehvr”作为参数：

angular.module("FFPA").directive('*cubehvr*', ['$compile', 'dataService', function ($compile, dataService)

我们被困住了，因为我们不知道如何设置 HTML 页面范围指令或变量，就像我们的第二个指令这样：

<div uib-popover="Last Name: {{empData.lName}}" 
    popover-trigger="'mouseenter'" 
    type="div" 
    class="btn btn-default">Tooltip
</div>

或者说这么简单：

  <div emp-info></div>

div 工具提示将包含调用 Web API 更新功能的 html 按钮。

我们在这里有一个按比例缩小的 POC Plunk：

POC Plunk

还在考虑将 Angular Bootstrap UI 用于工具：

Bootstrap UI Plunk

希望这是有道理的。

Answer 1

//编辑。我再次阅读了您的问题，并通过了我的回答。我没有完全回答你的问题，因为它是多层次的。现在我将解决您的所有问题并尝试回答：

1. 将 $scope 传递给其他指令。

$scope 是 MVVM 设计模式中的模型视图，它将您的模板（视图）和模型粘合在一起。从理论上讲，您可能可以将 $scope 传递给另一个指令，但我认为这是一种反模式。

1. 指令之间的通信。您可以使用至少 4 种方法来传达指令：

   • 共享相同的范围，你几乎在你的 plunker 中做了什么，只是不要在你的指令规范中定义任何“范围”。我不确定这是否是最好的方法，因为您的任何指令都可能使您的范围数据失真。
   • 创建隔离作用域并使用 ng-model 或 $watch，这是更安全的方法，但需要更多开销。在这种情况下，您将变量向下传递，您的作用域是.$watch。这是双向绑定。您可以推送和拉取值。 $watch
   • 创建服务，您可以在其中保留事件总线或变量存储等内容
   • 您可以将指令与事件通信： $on $emit 这适用于分层指令（如此有效，您必须创建独立的子范围）

2. 为 SVG 的子元素添加弹出框。 Bootstrap 能够将弹出框添加到正文而不是父元素。它对 SVG 很有用：https://angular-ui.github.io/bootstrap/#!#popover

我重构了您的代码以使用两个指令，并将数据加载到控制器中。一个指令包装弹出框，第二个指令传递数据，弹出框现在也使用模板，所以它是用 angular 编译的：

  var app = angular.module('FFPA',  ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);

  //controller
  app.controller('myCtrl', function ($scope, dataService) {
    $scope.test = 'test';
    dataService.getData().then(function(data) {
      $scope.dataset = data.reduce(function (obj, item) {
        obj[item.seatId.trim()] = item;
        item.fullName = item.fName + ' ' + item.lName;
        return obj;
      }, {});
    });
  });

  angular.module('FFPA').service('dataService', function($http){
    this.getData = function(){
      return $http.get("data.json").then(
        function(response){
          return response.data;
        }, function() {
          return {err:"could not get data"};
        }
      );
    }
  });

  //directive loads SVG into DOM
  angular.module('FFPA').directive('svgFloorplan', ['$compile', function ($compile) {
      return {
        restrict: 'A',
        templateUrl: 'test.svg',
        scope: {
          'dataset': '=svgFloorplan'
        },
        link: {
          pre: function (scope, element, attrs) {
            var groups = element[0].querySelectorAll("g[id^='f3']");
            scope.changeName = function (groupId) {
              if (scope.dataset[groupId] && scope.dataset[groupId].lastName.indexOf('changed') === -1) {
                scope.dataset[groupId].lastName += ' changed';
              }
            }

            groups.forEach(function(group) {
              var groupId = group.getAttribute('id');
              if (groupId) {
                var datasetBinding = "dataset['" + groupId + "']";
                group.setAttribute('svg-floorplan-popover', datasetBinding);

                $compile(group)(scope);
              }
            });
          }
        }
      }
  }]);

  angular.module('FFPA').directive('svgFloorplanPopover', ['$compile', function ($compile) {
      return {
        restrict: 'A',
        scope: {
          'person': '=svgFloorplanPopover'
        },
        link: function (scope, element, attrs) {
          scope.changeName = function () {
            if (scope.person && scope.person.fullName.indexOf('changed') === -1) {
              scope.person.fullName += ' changed';
            }
          }
          scope.htmlPopover = 'popoverTemplate.html';
          element[0].setAttribute('uib-popover-template', "htmlPopover");
          element[0].setAttribute('popover-append-to-body', 'true');
          element[0].setAttribute('popover-trigger', "'outsideClick'");
          element[0].querySelector('text').textContent += '{{ person.fullName }}';

          element[0].removeAttribute('svg-floorplan-popover');

          $compile(element)(scope);

        }
      }
  }]);

您的 HTML 正文现在看起来像：

  <body style="background-color:#5A8BC8;">
    <div ng-app="FFPA" ng-controller="myCtrl">
      <div svg-floorplan="dataset"></div>
    </div>
  </body>

弹出框的 HTML：

  <div><button type="button" class="btn btn-default" ng-click="changeName()">{{ person.fullName }}</button></div>

这里是工作 plunker： http://plnkr.co/edit/uHgnZ1ZprZRDvL0uIkcH?p=preview