从$scope上的动态求值函数绑定到服务

Binding from dynamically evaluated function on $scope to service

本文关键字:函数 绑定 服务 动态 scope      更新时间:2023-09-26

我有一个函数make_value_summary,它一般对$scope字段进行汇总。在这里,我使用它来构造location_summary,通过ng-bind绑定到视图。每当字段streetsuburbstate被更新时,location_summary就被更新。

$scope.location_summary = function() {
    var fields = [
        'street',
        'suburb',
        'state',
    ];
    return make_value_summary(fields, $scope, 'Location?');
};
function make_value_summary(fields, $scope, initial) {
    var summary = '';
    fields.forEach(function(field) {
        if ($scope[field] && $scope[field] !== '0') {
            if (summary) {
                summary = summary + ', ' + $scope[field];
            }
            else {
                summary = $scope[field];
            }
        }
    });
    if (summary) {
        return summary[0].toUpperCase() + summary.substring(1);
    }
    else {
        return initial;
    }
}

问题1:location_summary是如何动态更新的,从我最初对代码的观察来看,make_value_summary在第一次分配location_summary时应该只执行一次。

问题2:我想通过服务将location_summary绑定到视图的完全不同的部分。我应该如何将location_summary附加到服务Location。我试过使用$watch,但没有成功。

$scope.$watch('location_summary', function(newValue, oldValue) {
    // Just gives unevaluated reference to location_summary function
    console.log(newValue);
    console.log(oldValue);
});

编辑

得到了2的解。通过"评估"手表中的函数,即传入'location_summary()'$watch()。还是想回答我的第一个问题!

根据您的代码,请运行此代码段。

angular.module("app",[])
.controller("appController",appController);
appController.$inject=["$scope"];
function appController($scope){
$scope.location_summary = function() {
    var fields = [
        'street',
        'suburb',
        'state',
    ];
    return make_value_summary(fields, $scope, 'Location?');
};
function make_value_summary(fields, $scope, initial) {
    var summary = '';
    fields.forEach(function(field) {
        if ($scope[field] && $scope[field] !== '0') {
            if (summary) {
                summary = summary + ', ' + $scope[field];
            }
            else {
                summary = $scope[field];
            }
        }
    });
    if (summary) {
        return summary[0].toUpperCase() + summary.substring(1);
    }
    else {
        return initial;
    }
}
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="app" ng-controller="appController">
  
  <input ng-model="street">
  <input ng-model="suburb">
  <input ng-model="state">
  
  {{location_summary()}}
  </body>