如何在 scope.watch 中返回多个值？答案

【问题标题】：How to return multiple values in scope.watch?如何在 scope.watch 中返回多个值？
【发布时间】：2015-11-13 14:22:09
【问题描述】：

我正在尝试从 $scope.watch 函数返回多个值。

angular.module("MainApp")
.directive('isActiveNav', [ '$location', function($location) {
    return {
     restrict: 'A',
     link: function($scope, el, attrs) {
      $scope.location = $location;
      $scope.$watch(function() {
              return (el.parent().parent().parent().parent().hasClass('cbp-small'),location.path());
          }, function(hasClas, currentPath) {
              setTimeout(function(){
                console.log(hasClas, currentPath);
             },0)
        });
    }
 };
}]);

但这给了我这个错误Uncaught SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode。

我想在这里查看多个值： 1. APP的Current-Url 2.如果某个元素有一个名为“cbp-small”的类

我也尝试过 $watchCollection 和 $watchGroup 但也无法让它们工作。因此我试图从 scope.watch 函数中返回多个值。

【问题讨论】：

标签： angularjs angularjs-watch

【解决方案1】：

第一个参数不接受( ) 语法中的两个值。相反，您希望将要监视的两个值都存储在对象或数组中并返回。

angular.module("MainApp")
.directive('isActiveNav', [ '$location', function($location) {
    return {
     restrict: 'A',
     link: function($scope, el, attrs) {
      $scope.location = $location;
      $scope.$watch(
        function() {
          return {hasPath: el.parent().parent().parent().parent().hasClass('cbp-small'), currentPath: location.path()};
        }, 
        function(newPathObject, oldPathObject) {
          if (!angular.equals(newPathObject, oldPathObject)) {
            setTimeout(function(){               
              console.log(newPathObject.hasClass, newPathObject.currentPath);
            },0)
          };
        },
        true
      });
     }
   };
}]);

您还想添加 true 作为 objectEquality == true 的第三个参数。根据Angular documentation：

当 objectEquality == true 时，watchExpression 的不等式由 angular.equals 函数确定。保存值为了稍后比较的对象，使用了 angular.copy 函数。因此这意味着观看复杂的物体会有不利的内存和性能影响。

此外，在使用 $watch 时，您希望通过将其包装在 if 语句中并检查对象值是否已使用 angular.equals 更改来防止回调在对象实例化时触发。您可以使用this plunker 引用此内容。

【讨论】：

每次都会调用callback，因为对象是通过引用存储的，dirtycheck总会通过
数组是对象 :)) 所以它会以这种方式工作
您可以将true 作为$scope.$watch 的第三个参数传递，以使AngularJS 使用angular.equals 而不是== 进行脏检查。那么我认为这个解决方案是最好的。
第一次会，但是你可以检查对象是否被修改。 @stevuu 啊是的！没错，我忘记了真正的论点。
如果您使用true 参数，您可以删除!angular.equals 部分，因为AngularJS 会为您做到这一点。

【解决方案2】：

您可以连接值：

return el.parent().parent().parent().parent().hasClass('cbp-small').toString() + "&&&" + location.path();

然后会生成一个类似"true&&&/.../.../"的字符串 Angular 将对这个字符串进行脏检查，如果有任何值会改变，那么这个字符串就会改变，所以回调会被调用并在回调中写入

function(newVal) {
     var args = newVal.split('&&&');
     var hasClas = args[0]==="true", currentPath = args[1];
     setTimeout(function(){
         console.log(hasClas, currentPath);
     },0
});

【讨论】：