Question

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

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

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

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

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

Answer 1

如果您想要观看多个属性，那么您可以使用对象包装它们并观察对象的深度更改

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

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

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

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

Answer 2

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中的呈现模板

在angular.js中渲染逻辑？

2 个答案: