Question

我有一个角度应用程序，它使用d3来显示项目，并有一个infoPanel，显示被点击的项目的信息。这是有效的，但点击项目以激活/打开infopanel不起作用。

在d3数据控制文件中，我有：

'use strict';

var settings ;


angular.module('App')
    .directive('data', ['sessionmgmt', 'thedata', 'gui', function (session, data, gui) {
        return {
            link: function postLink(scope, element, attrs) {

                var promise = angular....getData...;
                promise.then(function () {

                    settings = session.settings;

                    svg = ...

                    createItems(svg, items);
                }, function () {});
            }
        };
  }]);

function createItems(svg, items) {


    let item = svg.append("g")
        .attr("class", "nodes")
        .selectAll(".node")
        .data(items, function (d) {
            return d.id;
        });


    appendIcons(item);

}

function appendIcons(nodes){
  nodes = nodes.enter().append("g")
    .attr("class", "node");

    nodes.append("title")
      .text(function (d) {
          return d.data['label'];
      });

  nodes.on("click",function(d){
    if(settings.selectedItem === d.id){
      settings.selectedItem = null;
    }else{
      settings.selectedItem = d.id;
    }

  });

}

然后在我的infoPanel控制器中我有：

'use strict';

angular.module('App')
  .controller('ContentpanelCtrl', ['$scope', 'sessionmgmt', function ($scope, sessionmgmt) {
    var contentPanel = this;

    this.settings = sessionmgmt.settings;

    $scope.activate = function activate() {
      contentPanel.settings.contentPanelOpen = true;
    };


    $scope.getSelected = function getSelected(){
      return contentPanel.settings.itemSelected;
    } 

    $scope.isNodeSelected = function isSelected(){
      return contentPanel.settings.itemSelected !== null;
    } 

    $scope.$watch("contentPanel.settings.itemSelected", function(newVal, oldVal) {
      console.log(newVal);
      if (newVal !== oldVal){
        $scope.activate();
      }
    });


  }]);

首次加载页面时，console.log正在运行，但是当我点击这些项目时，此表不会被触发。我知道'click'正在运行，因为getSelected正在我的infopanel上显示正确的数据。 'watch'和getSelected都使用完全相同的设置变量....难倒。

Answer 1

有两种方法可以做到这一点。第一个是我在评论中提到的，你将指令的范围作为参数传递给点击事件中调用set.seed(1234) input <- data.frame(AF = sample(0:1, 100, replace=TRUE), CAD = sample(0:1, 100, replace=TRUE), CHF = sample(0:1, 100, replace=TRUE), DEM = sample(0:1, 100, replace=TRUE), DIAB = sample(0:1, 100, replace=TRUE)) input$Counts <- rowSums(input)的{{1}}和createItems函数。

来自指令：

appendIcons

其他功能：

scope.$apply();

另一种方法是更改createItems(svg, items, scope);功能。您要查看的function createItems(svg, items, scope) { let item = svg.append("g") /* ... */ appendIcons(item, scope); } function appendIcons(nodes, scope){ nodes = nodes.enter().append("g") /* ... */ nodes.on("click",function(d){ if(settings.selectedItem === d.id){ settings.selectedItem = null; }else{ settings.selectedItem = d.id; } scope.$apply(); }); }不属于范围，因为您使用$scope.$watch()而不是contentPanel.settings.itemSelected，我假设this的一部分。要使手表正常工作，您需要使用函数作为watch函数中的第一个参数，如下所示：

$scope

Answer 2

也许您可以尝试将确切的对象传递给观察者而不是字符串？

$scope.$watch(function() {
  if (contentPanel && contentPanel.settings) {
    return contentPanel.settings.itemSelected;
  }
}, function(newVal, oldVal) {
  console.log(newVal);
  if (newVal !== oldVal){
    $scope.activate();
  }
});

Answer 3

作为我评论的补充。

在控制器中：

$scope.toggleSelectedItem = function(item) {
   if(contentPanel.settings.itemSelected && 
      contentPanel.settings.itemSelected === item.id){
     contentPanel.settings.itemSelected = null;
   } 
   else {
     contentPanel.settings.itemSelected = item.id;
   }
}

HTML：

<div ng-repeat="item in items" ng-click="toggleSelectedItem(item)">
   <!--Content-->
</div>

AngularJS $仅在初始化

3 个答案: