Angularjs 角坐标系下模型的相依性
在Angular中,一个关键特性是双向绑定,它使模型始终保持最新。然而,我有一种情况,我有一个本质上是模型的从属属性。我的问题是如何实施它。我可以在视图中插入一个表达式来显示依赖于模型元素的计算,但我希望将该表达式指定为模型中的一个字段,这样其他表达式就可以在所有内容都很好地更新时使用该结果 一个简单的示例可能在模型中有A、b和c字段,其中c=A*b。可以将Angularjs 角坐标系下模型的相依性,angularjs,Angularjs,在Angular中,一个关键特性是双向绑定,它使模型始终保持最新。然而,我有一种情况,我有一个本质上是模型的从属属性。我的问题是如何实施它。我可以在视图中插入一个表达式来显示依赖于模型元素的计算,但我希望将该表达式指定为模型中的一个字段,这样其他表达式就可以在所有内容都很好地更新时使用该结果 一个简单的示例可能在模型中有A、b和c字段,其中c=A*b。可以将{{a*b}}放入视图中,但我更希望有一个c字段,这样我可以在其他表达式中引用c,只需在需要显示它的视图中使用{c},每当更新a或b时,使用
{{a*b}}
放入视图中,但我更希望有一个c字段,这样我可以在其他表达式中引用c,只需在需要显示它的视图中使用{c}
,每当更新a或b时,使用c更新
我想你可以在a和b上放置一块手表,然后重新计算c,但似乎机器已经在某个角度自动完成了,因为它适用于视图中的表达式。如果我没有提前知道表达式(我也不会知道),我需要解析c的表达式来提取变量并在所有变量上设置手表。。。当然,有更好的方法
我们可以做一些类似于将角度表达式放入模型的事情吗
我知道这里有一个危险——您可以创建一个自引用循环,但这是可以检测到的,因此可能会抛出错误 敲除有可计算可观察的概念,但角度没有这样不同的东西。但是,您可以执行以下操作。当a发生变化时,它会自动改变c的值。请看下面的代码片段
var-app=angular.module('plunker',[]);
应用程序控制器('MainCtrl',函数($scope){
$scope.name='World';
$scope.a=5;
$scope.b=10;
$scope.c=function(){返回$scope.a*$scope.b}
$scope.changea=function(){$scope.a=25}
});代码>
安古拉斯普朗克
文件。写(“”);
你好{{name}}
{{c()}}
a={{a}
凯尔和杰尼什提供了很好的答案,在许多情况下可能是合适的,但这两者之间仍然有细微的区别
无论何时引用属性,都需要使用parens;及
与仅当其依赖关系发生变化时相比,在需要时计算该值可能会导致效率损失
在搜索“Computed Property”(谢谢Jenish,这是我需要的术语)之后,我发现可以消除parens(),但我还没有找到一个解决方案来保存值,并且只在需要时更新它
可以在javascript中向对象添加属性,只定义一个getter,这本身就很好,但更重要的是,它可以与Angular系统一起工作
请注意,在下面的代码段中,“vars”属性仅用于为数学函数和我们为这个特定示例向用户公开的变量提供上下文。只有Object.defineProperty(…)
对于这种通用方法是必不可少的
var-app=angular.module('tester',[]);
应用控制器('VariablesCtrl',函数($scope){
//用于访问函数的数学初始化上下文
$scope.vars=window.Math;
//初始变量
$scope.vars.a=2;
$scope.vars.b=3;
$scope.vars.c_expr='a*b';
$scope.vars.d_expr='pow(c,2)+10';
//根据用户输入表达式,将依赖属性添加到c和d的$scope
Object.defineProperty($scope.vars,'c'{
get:function(){
返回$scope.$eval($scope.vars.c_expr,$scope.vars);
}
});
Object.defineProperty($scope.vars,'d'{
get:function(){
返回$scope.$eval($scope.vars.d_expr,$scope.vars);
}
});
});代码>
角计算特性
a:
b:
c(一个表达):
c:{{vars.c}
d(一个表达):
d:{{vars.d}
我认为第三种方法是真正的角度方法
您可以在$scope成员上使用$watch,以便在范围上的变量更改时获得回调。在最新的angular版本中,您可以在一个命令中查看变量组
所以会是这样的
$scope.$watch('a', function(newValue, oldValue) {
$scope.c= newValue + $scope.b;
});
$scope.$watch('b', function(newValue, oldValue) {
$scope.c= newValue + $scope.a;
});
控制器:$scope.calculatedVariable=function(){return a*b}
视图:{{ctrl.calculatedVariable()}}
是否有方法根据函数或字符串表达式确定要监视哪些变量?Angular似乎能够为视图表达式实现这一点,但我不清楚它是如何实现的。即使变量是间接相依的,比如Jenish的答案中c()是相依变量的函数,Vire表达式(在双卷曲中)也会更新。一旦c()被放入视图中的表达式中,当该函数中的变量被更新时,它将被更新。Angular如何知道c()中有需要关注的变量呢?Watch表达式是一个范围内有变量名称的字符串(在我的示例中为“a”和“b”),所以如果可以从表达式中提取范围变量,那么就可以通过编程的方式制作手表。Angular在内部使用$watch更新模板,所以以间接方式更新模板并不重要。它在任何事件和调用手表之后比较作用域中的值,直到它们停止生成调用其他手表的更改