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 控制器中，我有：

'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 的一部分。要让手表正常工作，您需要使用一个函数作为手表函数中的第一个参数，如下所示：

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

Answer 2

作为对我评论的补充。

在控制器中：

$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>

Answer 3

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

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