TypeScript IScope.%24watchCollection方法代碼示例

export function SettingsController(
  this: IController,
  loadingTracker,
  $scope: IScope,
  dimCsvService,
  dimStoreService: StoreServiceType,
  D2StoresService: StoreServiceType,
  $i18next,
  $rootScope: IRootScopeService
) {
  'ngInject';

  const vm = this;

  vm.featureFlags = {
    reviewsEnabled: $featureFlags.reviewsEnabled,
    colorA11y: $featureFlags.colorA11y
  };
  vm.loadingTracker = loadingTracker;

  $scope.$watchCollection('vm.settings', () => {
    settings.save();
  });

  vm.charColOptions = _.range(3, 6).map((num) => ({ id: num, name: $i18next.t('Settings.ColumnSize', { num }) }));
  vm.vaultColOptions = _.range(5, 21).map((num) => ({ id: num, name: $i18next.t('Settings.ColumnSize', { num }) }));
  vm.vaultColOptions.unshift({ id: 999, name: $i18next.t('Settings.ColumnSizeAuto') });

  subscribeOnScope($scope, isPhonePortraitStream(), (isPhonePortrait) => {
    vm.isPhonePortrait = isPhonePortrait;
  });

  vm.languageOptions = {
    de: 'Deutsch',
    en: 'English',
    es: 'Español (España)',
    'es-mx': 'Español (México)',
    fr: 'Français',
    it: 'Italiano',
    pl: 'Polski',
    'pt-br': 'Português (Brasil)',
    ru: 'Русский',
    ja: '日本語',
    'zh-cht': '繁體中文' // Chinese (Traditional)
  };

  vm.reviewsPlatformOptions = {
    0: $i18next.t('DtrReview.Platforms.All'),
    1: $i18next.t('DtrReview.Platforms.Xbox'),
    2: $i18next.t('DtrReview.Platforms.Playstation'),
    3: $i18next.t('DtrReview.Platforms.AllConsoles'),
    4: $i18next.t('DtrReview.Platforms.Pc')
  };

  if ($featureFlags.colorA11y) {
    vm.colorA11yOptions = ['-', 'Protanopia', 'Protanomaly', 'Deuteranopia', 'Deuteranomaly', 'Tritanopia', 'Tritanomaly', 'Achromatopsia', 'Achromatomaly'];
  }

  vm.fakeWeapon = {
    icon: `~${exampleWeaponImage}`,
    dtrRating: 4.6,
    dtrRatingCount: 100,
    dmg: 'void',
    isNew: true,
    location: {
      type: 'energy'
    },
    bucket: {
      type: 'energy'
    },
    visible: true,
    primStat: {
      value: 300
    }
  };

  vm.fakeArmor = {
    icon: `~${exampleArmorImage}`,
    quality: {
      min: 96
    },
    isNew: true,
    location: {
      type: 'energy'
    },
    bucket: {
      type: 'energy'
    },
    visible: true,
    primStat: {
      value: 300
    }
  };

  vm.settings = settings;
  vm.initialLanguage = vm.settings.language;

  // Edge doesn't support these
  vm.supportsCssVar = window.CSS && window.CSS.supports && window.CSS.supports('width', 'var(--fake-var)', 0);

//.........這裏部分代碼省略.........

function LoadoutDrawerCtrl(
  this: IController & {
    account: DestinyAccount;
    stores: DimStore[];
    loadout?: Loadout & { warnitems?: DimItem[] };
  },
  $scope: IScope,
  dimLoadoutService,
  toaster,
  $i18next
) {
  'ngInject';
  const vm = this;

  const dimItemCategories = vm.account.destinyVersion === 2 ? D2Categories : D1Categories;

  this.$onChanges = (changes) => {
    if (changes.stores) {
      const stores = vm.stores || [];
      vm.classTypeValues = [{ label: $i18next.t('Loadouts.Any'), value: -1 }];

      /*
      Bug here was localization tried to change the label order, but users have saved their loadouts with data that was in the original order.
      These changes broke loadouts.  Next time, you have to map values between new and old values to preserve backwards compatability.
      */

      _.each(_.uniq(stores.filter((s) => !s.isVault), false, (store) => store.classType), (store) => {
        let classType = 0;

        switch (parseInt(store.classType.toString(), 10)) {
        case 0: {
          classType = 1;
          break;
        }
        case 1: {
          classType = 2;
          break;
        }
        case 2: {
          classType = 0;
          break;
        }
        }

        vm.classTypeValues.push({ label: store.className, value: classType });
      });
    }

    if (changes.account) {
      vm.show = false;
    }
  };

  $scope.$on('dim-delete-loadout', () => {
    vm.show = false;
    dimLoadoutService.dialogOpen = false;
    vm.loadout = copy(vm.defaults);
  });

  $scope.$on('dim-edit-loadout', (_event, args: { loadout?: Loadout; showClass: boolean; equipAll: boolean }) => {
    vm.showClass = args.showClass;
    if (args.loadout) {
      vm.loadout = copy(args.loadout);
      vm.show = true;
      dimLoadoutService.dialogOpen = true;
      if (vm.loadout.classType === undefined) {
        vm.loadout.classType = -1;
      }
      vm.loadout.items = vm.loadout.items || {};

      // Filter out any vendor items and equip all if requested
      vm.loadout.warnitems = flatMap(Object.values(vm.loadout.items), (items) => items.filter((item) => !item.owner));

      _.each(vm.loadout.items, (items, type) => {
        vm.loadout!.items[type] = items.filter((item) => item.owner);
        if (args.equipAll && vm.loadout!.items[type][0]) {
          vm.loadout!.items[type][0].equipped = true;
        }
      });
    }
  });

  $scope.$on('dim-store-item-clicked', (_event, args) => {
    vm.add(args.item, args.clickEvent);
  });

  $scope.$watchCollection('vm.loadout.items', () => {
    vm.recalculateStats();
  });

  vm.settings = settings;

  vm.types = _.flatten(Object.values(dimItemCategories)).map((t) => t.toLowerCase());

  vm.show = false;
  dimLoadoutService.dialogOpen = false;
  vm.defaults = {
    classType: -1,
    items: {}
  };
//.........這裏部分代碼省略.........

function CompareCtrl(
  this: IController & {
    comparisons: DimItem[];
    compare: DimItem;
  },
  $scope: IScope,
  toaster,
  $i18next
) {
  'ngInject';

  const vm = this;

  vm.$onInit = () => {
    this.listener = router.transitionService.onExit({}, () => {
      CompareService.dialogOpen = false;
      vm.show = false;
    });
  };

  vm.$onDestroy = () => {
    this.listener();
  };

  function addMissingStats(item: DimItem): DimItem {
    if (!item.stats) {
      return item;
    }

    if (!vm.comparisons[0]) {
      item.stats.forEach((stat, idx) => {
        vm.statsMap[stat.id] = { index: idx, name: stat.name };
      });
      return item;
    }
    const itemStatsMap = {};
    item.stats.forEach((stat, idx) => {
      itemStatsMap[stat.id] = { index: idx, name: stat.name };
    });

    _.difference(Object.keys(vm.statsMap), Object.keys(itemStatsMap)).forEach((statId) => {
      item.stats!.splice(vm.statsMap[statId].index, 0, {
        value: undefined,
        id: Number(statId),
        statHash: Number(statId),
        name: vm.statsMap[statId].name,
        missingStat: true,
        // Fill in other required stat values
        base: 0,
        bonus: 0,
        sort: 0,
        maximumValue: 0,
        bar: true
      });
      vm.statRanges[statId] = { min: 0, max: 0, enabled: false };
    });

    _.difference(Object.keys(itemStatsMap), Object.keys(vm.statsMap)).forEach((statId) => {
      Object.keys(vm.statsMap).forEach((statMapId) => {
        if (vm.statsMap[statMapId].index >= itemStatsMap[statId].index) {
          vm.statsMap[statMapId].index++;
        }
      });
      vm.statsMap[statId] = itemStatsMap[statId];

      const missingStatItemIdx = vm.comparisons.findIndex(
        (compItem: DimItem) => !(compItem.stats || []).some((stat) => stat.id === Number(statId))
      );
      if (missingStatItemIdx >= 0) {
        vm.comparisons[missingStatItemIdx].stats!.splice(vm.statsMap[statId].index, 0, {
          value: undefined,
          id: Number(statId),
          statHash: Number(statId),
          name: itemStatsMap[statId].name,
          missingStat: true,
          // Fill in other required stat values
          base: 0,
          bonus: 0,
          sort: 0,
          maximumValue: 0,
          bar: true
        });
      }
    });
    return item;
  }

  // TODO: Rather than mutating the actual item stats, keep a separate array of just what we need!
  function removeMissingStats() {
    vm.comparisons.forEach((compItem: DimItem) => {
      if (compItem.stats) {
        const statIndex = compItem.stats.findIndex((stat) => Boolean(stat.missingStat));
        if (statIndex >= 0) {
          compItem.stats.splice(statIndex, 1);
        }
      }
    });
  }

  vm.show = CompareService.dialogOpen;
//.........這裏部分代碼省略.........