从$scope上的动态求值函数绑定到服务
Binding from dynamically evaluated function on $scope to service
我有一个函数make_value_summary
,它一般对$scope
字段进行汇总。在这里,我使用它来构造location_summary
,通过ng-bind
绑定到视图。每当字段street
、suburb
或state
被更新时,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>
相关文章:
- 如何向onClick事件处理程序传递一个接受参数的函数,并且仍然将该函数绑定到组件's”;这个“;上下文
- Jquery:将函数绑定到已绑定元素的点击事件
- 我可以通过使用函数绑定来保留默认值吗?如果没有,为什么
- 这在 Object 方法中不引用对象,而是引用函数绑定到的标记
- 为什么当我尝试将函数绑定到自身时,“this”对象仍然引用窗口
- 如何将函数绑定到使用链接函数创建 HTML 的角度指令
- 将jquery函数绑定到事件
- 将服务中的函数绑定到$scope(错误:无法设置undefined的属性'onChange')
- 使用闭包/函数绑定将自函数作为回调传递
- 如何在 Javascript 中将函数绑定到对象数据成员的更改
- 需要将内部函数绑定到元素的单击事件
- 在Javascript中将对象原型函数绑定到对象
- 将函数绑定到Twitter Bootstrap Modal Ajax Complete
- ng使用一个不识别临时变量形式ng repeat的函数绑定html
- 将函数绑定到baz后调用fn.apply(bar,[])
- 将函数绑定到采用参数的不同事件
- 如何将返回函数绑定到标记角度
- 在IE9中未检测到视图模型函数绑定,但在FF和Chrome中有效
- 如何将函数绑定到ShadowDOM内部的元素
- 将原型函数绑定到此的方式不那么冗长