我正在处理在指令内部处理的一小段代码。该指令传递了一个大的数据对象,该对象分为类型和子类型。使用下拉菜单意味着用户可以选择他们想要在显示中看到的数据部分,并且它应该是动态的,这意味着当他们更改选择时,数据将立即更新。我这样做的第一个尝试是将代码放入附加到该指令的控制器中。
使用附加到指令的控制器
看法
<select ng-model="type" ng-change="updateDisplay()">
<option value="typeOne">One</option>
<option value="typeTwo">Two</option>
<option value="typeThree">Three</option>
</select>
<select ng-model="subType" ng-change="updateDisplay()">
<option value="subTypeOne">One</option>
<option value="subTypeTwo">Two</option>
<option value="subTypeThree">Three</option>
</select>
...
<div ng-repeat="(key, value) in selectedData">
{{key}}, {{value}}
</div>
控制器
$scope.type = 'typeOne';
$scope.subType = 'subTypeOne';
$scope.selectedData = null;
$scope.updateDisplay = function() {
//$scope.data is a large object of data passed into the directive, but not important to define for this post
$scope.selectedData = $scope.data[$scope.type][$scope.subType];
}
$scope.updateDisplay(); // call on page load to populate with defaults
这种方法效果很好,但有人向我建议,这不是正确的“角度”方式,所有这些都应推迟到服务中使用。在这种情况下,不仅需要将数据传递给我的指令,还需要将所有服务方法传递给我。在选择下拉列表中,我们需要进行ng-change调用,以使服务知道值已更改并且需要更新
ng-change="setSelectedType({type:type})"
然后可能需要在该“ Setter”函数运行之后运行另一个函数,以便重新计算selectedData的动态值。(等效于运行上面的updateDisplay()。
我的总体问题是,将所有这些逻辑转移到服务中是否还有意义?我将不得不在服务端编写getter和setter,并在每次进行ng-change时都调用它们,除了拥有该服务外,还要返回过滤后的数据。相反,如果在控制器中完成此操作,则无需为变量创建任何“ setters / getters”,因为它们已绑定到作用域并自动更新。(对我而言,使用诸如angular的框架的整个要点)。
不必过于怀疑这个问题,具有Angular经验的人可以谈论这个吗?
我在您的示例中看不到任何逻辑。我确实同意业务逻辑最好位于服务中,因为它有助于从应用程序的显示方面将逻辑排除在外。
我认为有角度的方式是使用观察者。
scope.$watch('subType',function(subType) {
scope.selectedData = data[scope.type || 'defaultKey'][subType || 'defaultKey'];
});
不需要具有updateData函数或在页面加载时调用它,因为观察者将在第一个摘要期间至少执行一次。
另一个问题是scope.data
,是否真的需要解决这个问题。如果模板中没有任何直接与其绑定的东西,则将其置于范围之外。这有助于保持范围与模板中的内容相关。稍后,当您在浏览器中调试并查看范围时,$($0).scope()
您只会看到重要的内容。
如果您data
在范围内。您可以这样做。角度不会因缺少键而出错。除非选择有效,否则模板将不会重复。
<div ng-repeat="(key, value) in data[type][subType]">
{{key}}, {{value}}
</div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句