1

我有控制数据可视化呈现的三个模型属性年份、指标、地理。

根据此模型中的更改，我希望能够控制可视化的呈现：

  //Pseudo code
  watch function ( year, indicator, geography ) {
     if(geography.previous == a && geography.current == b){
        renderA()
     }
     if(geography.previous == a && year == 1950){
        renderB()
     }
  }

如上面的示例所示，我希望能够将先前的值与当前的值和模型更改的任意组合进行比较以确定渲染。

我将如何在 Angular 中进行设置？
（可能包括模型服务和观察多个属性......）

4

2 回答 2

1

如果你想观察多个属性，那么你可以用对象包装它们并观察对象的深层变化

$scope.obj = {
   year : ...
   indicator : ...
   geography : ...
}
$scope.$watch('obj', function(newValue, oldValue) {
   // your logic dependent on changes
}, true);

注意 $watch 函数的第三个true参数。它负责观察深层变化。

我不知道你想渲染什么，但如果这些是完全不同的模板，那么你可以使用ngSwitch。

我不确定在这里使用某种服务是否是正确的选择。我倾向于某种指令。主要是因为服务没有的范围。您可以使用指令包装所有内容并将数据传递给执行渲染和逻辑的指令。

于 2013-07-29T08:11:21.673 回答
0

ng-include可以在这里为您提供帮助。A您可以为和定义模板B。这些模板可以是服务器端或客户端（使用 ng-template）。

如果使用客户端模板，它们看起来像

<script type="text/ng-template" class="template" id="templateA">
<!-- HTML for A here -->
</script>

<script type="text/ng-template" class="template" id="templateB">
<!-- HTML for B here -->
</script>

您的 html 不能使用 ng-include 动态切换模板。HTML看起来像

<div id="renderContainer" ng-include='templateName'></div>

在您的控制器中，您可以定义监视功能

//Pseudo code
  watch function ( year, indicator, geography ) {
     if(geography.previous == a && geography.current == b){
        $scope.templateName='templateA';
     }
     if(geography.previous == a && year == 1950){
        $scope.templateName='templateB';
     }
  }

更改templateName变量将动态更改 UI 中呈现的模板

于 2013-07-29T07:58:21.377 回答