Render logic в angular.js?

Question

У меня есть три атрибута модели год, индикатор, география, который управляет визуализацией визуализации данных.

В зависимости от того, что изменилось в этой модели, я хочу, чтобы иметь возможность управлять визуализацией визуализации:

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

Как показывает приведенный выше пример, я хочу, чтобы иметь возможность сравнить предыдущее значение текущий и любая комбинация изменений модели для определения рендеринга.

Как бы установить это в Угловом?
(возможно, включая услугу по модели и просмотра нескольких атрибутов ...)

Answer 1

ng-include может помочь вам в этом. Вы можете определить шаблон для A и B. Этот шаблон может быть стороне сервера или клиента (с использованием ng-шаблона).

При использовании на стороне клиента шаблоны они будут выглядеть

<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> 

You HTML не может использовать нг-включать для переключения шаблона динамически. 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 будет динамически изменять обработанный шаблон в пользовательском интерфейсе

Answer 2

Если вы хотите смотреть множественным затем вы можете обернуть их объектом и понаблюдать за глубокими изменениями на объекте

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

Обратите внимание на третий параметр true на функцию $ watch. Он несет ответственность за глубокие изменения.

Я не знаю, что вы хотите визуализировать, но если это совершенно разные шаблоны, вы можете использовать ngSwitch.

Я не уверен, что использование какого-либо обслуживания является правильным выбором здесь. Я склоняюсь к какой-то директиве. В основном из-за объема, которые у служб нет. Вы можете просто обернуть все директивой и передать свои данные в директиву, которая выполняет рендеринг и логику.