javascript - 如何在下拉列表更改时重新加载 Angular Directive(指令)/组件？

Question

我正在开发一个基于用户选项的解决方案。

一个用户可以有 3 个配置文件。基于该选择，X、Y 和 Z 应根据该配置文件重新加载/更新新数据。

页面保持不变，只有 X、Y 和 Z 应该重新加载。我怎样才能做到这一点？如何在任何更改后重新加载这些“元素”？

Answer 1

简化的解决方案可以是这种方法:

app.directive('x', function($rootScope) {
  return {
    link: function(scope, element) {
      $rootScope.$on('profile:changed', function(event) {
        scope.template = event.data.templateUrl;
      }
    }
    template: '<div ng-include="template">'
  }
});
app.controller('AppCtrl', function($scope) {
  $scope.choseTemplate = function(template) { //fire when dropdown selection changed
    $scope.emit('profile:changed', {templateUrl : template});
  };
});