javascript - AngularJS $watch 仅在初始化时触发

Question

我有一个 Angular 应用程序，它使用 d3 显示项目，并有一个 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 Controller 中我有:

'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 正在运行，但是当我单击这些项目时，该监视不会被触发。我知道“点击”正在起作用，因为 getSelected 在我的信息面板上显示了正确的数据。 'watch' 和 getSelected 都使用完全相同的设置变量......被难住了。

Answer 1

有两种方法可以做到这一点。第一个是我在评论中建议的，您将指令的范围作为参数传递到调用 scope.$apply() 的 createItems 和 appendIcons 函数中。 ; 在点击事件中。

来自指令:

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 而不是 $scope，我假设为 controllerAs 的一部分。要使 watch 正常工作，您需要使用一个函数作为 watch 函数中的第一个参数，如下所示:

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