在 Angular 中,一个关键特性是双向绑定(bind),它使模型始终保持最新。但是,我有一种情况,我拥有本质上是模型的依赖属性。我的问题是关于如何实现它。我可以在 View 中插入一个表达式来显示依赖于模型元素的计算,但我希望将该表达式分配为模型中的一个字段,这样其他表达式就可以使用该结果,所有内容都可以很好地更新。
一个简单的示例可能在模型中包含字段a、b 和c,其中c = a * b强>。可以将 {{a * b}}
放入 View 中,但我宁愿为 c 设置一个字段,以便我可以引用 c在其他表达式中使用 {{c}}
并在我需要显示它的 View 中使用 c 每当 a 或 < strong>b 已更新。
我猜你可以在 a 和 b 上观察并重新计算 c,但看起来机器已经在 Angular 的某个地方了自动完成,因为它适用于 View 中的表达式。如果我提前不知道表达式(我不会),我需要解析 c 的表达式以提取变量并在所有变量上设置监视...对于 Angular,肯定有更好的方法。
可以做一些事情,比如将 Angular 表达式放入模型中吗?
我知道这里有一个危险 - 您可以创建一个自引用循环,但它会被检测到,从而可能引发错误。
最佳答案
Knockout 有 computableObservable 的概念,但 angular 没有这样不同的东西。但是,您可以执行以下操作。当 a 改变时,它会自动改变 c 的值。请看下面的代码片段。
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.a=5;
$scope.b=10;
$scope.c = function(){return $scope.a*$scope.b}
$scope.changea = function(){$scope.a = 25}
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.3.x" src="https://code.angularjs.org/1.3.13/angular.js" data-semver="1.3.13"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
{{c()}}
<input type="button" value="change a value to 25" ng-click="changea()" />
a = {{a}}
</body>
</html>
关于angularjs - Angular 模型的依赖属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28666766/