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

 public initialize() {
   this.model.$asyncValidators['validateApplicationName'] = (value: string) => {
     const deferred: IDeferred<boolean> = this.$q.defer();
     ApplicationNameValidator.validate(value, this.cloudProviders).then((result: IApplicationNameValidationResult) => {
       if (result.errors.length) {
         deferred.reject();
       } else {
         deferred.resolve();
       }
     });
     return deferred.promise;
   };
   this.$scope.$watch(this.$attrs.cloudProviders, () => this.model.$validate());
 }

function ItemTagController(
  this: IController & {
    item: DimItem;
  },
  $scope: IScope,
  $rootScope: IRootScopeService
) {
  'ngInject';
  const vm = this;

  vm.itemTags = itemTags;
  $scope.$watch('$ctrl.item.dimInfo.tag', () => {
    if (vm.item.dimInfo) {
      vm.selected = _.find(itemTags, (tag) => {
        return tag.type === vm.item.dimInfo.tag;
      });
    }
  });

  vm.updateTag = () => {
    vm.item.dimInfo.tag = vm.selected.type;
    if (!vm.item.dimInfo.tag) {
      delete vm.item.dimInfo.tag;
    }
    $rootScope.$broadcast('dim-filter-invalidate');
    vm.item.dimInfo.save!();
  };

  $scope.$on('dim-item-tag', (_e, args: { tag: TagValue }) => {
    if (vm.item.dimInfo.tag === args.tag) {
      delete vm.item.dimInfo.tag;
    } else {
      vm.item.dimInfo.tag = args.tag;
    }
    $rootScope.$broadcast('dim-filter-invalidate');
    vm.item.dimInfo.save!();
  });
}

  vm.$onInit = () => {
    const item = vm.item;
    vm.hasDetails = Boolean(
      (item.stats && item.stats.length) ||
        item.talentGrid ||
        item.objectives ||
        (item.isDestiny2() && item.flavorObjective) ||
        item.secondaryIcon
    );
    vm.showDescription = Boolean(item.description && item.description.length);
    vm.showDetailsByDefault = !item.equipment && item.notransfer;
    vm.itemDetails = vm.showDetailsByDefault;

    dimDestinyTrackerService.getItemReviews(vm.item).then(() => $scope.$apply());

    // DTR 404s on the new D2 languages for D1 items
    let language = vm.settings.language;
    if (vm.item.destinyVersion === 1) {
      switch (language) {
        case 'es-mx':
          language = 'es';
          break;
        case 'pl':
        case 'ru':
        case 'zh-cht':
          language = 'en';
          break;
      }
    } else {
      // For D2, DTR uses English for es-mx
      switch (language) {
        case 'es-mx':
          language = 'es';
          break;
      }
    }
    vm.destinyDBLink = `http://db.destinytracker.com/d${vm.item.destinyVersion}/${
      vm.settings.language
    }/items/${vm.item.hash}`;

    if (vm.item.primStat) {
      vm.light = vm.item.primStat.value.toString();
    }
    if (vm.item.dmg) {
      vm.classes[`is-${vm.item.dmg}`] = true;
    }

    if (
      vm.item.classTypeName !== 'unknown' &&
      // These already include the class name
      vm.item.type !== 'ClassItem' &&
      vm.item.type !== 'Artifact' &&
      vm.item.type !== 'Class'
    ) {
      vm.classType =
        vm.item.classTypeNameLocalized[0].toUpperCase() + vm.item.classTypeNameLocalized.slice(1);
    }

    /*
    * Get the item stats and its stat name
    * of the equipped item for comparison
    */
    if (vm.item.equipment) {
      if (vm.compareItem) {
        $scope.$watch('vm.compareItem', compareItems);
      } else {
        $scope.$watch('$parent.$parent.vm.store.items', (items: DimItem[]) => {
          const item = (items || []).find((item) => item.equipped && item.type === vm.item.type);
          compareItems(item);
        });
      }
    }
  };

function MoveItemPropertiesCtrl(
  this: IController & {
    item: DimItem;
    compareItem?: DimItem;
    failureStrings?: string[];
    rewards?: {
      quantity: number;
      item: DestinyInventoryItemDefinition;
    }[];
    settings: typeof settings;
    infuse(item: DimItem, $event: IAngularEvent): void;
  },
  ngDialog,
  $scope: IScope,
  $rootScope: IRootScopeService
) {
  'ngInject';
  const vm = this;

  vm.tab = 'default';
  vm.locking = false;
  vm.classes = {
    'is-arc': false,
    'is-solar': false,
    'is-void': false
  };
  vm.light = null;
  vm.settings = settings;

  vm.$onInit = () => {
    const item = vm.item;
    vm.hasDetails = Boolean(
      (item.stats && item.stats.length) ||
        item.talentGrid ||
        item.objectives ||
        (item.isDestiny2() && item.flavorObjective) ||
        item.secondaryIcon
    );
    vm.showDescription = Boolean(item.description && item.description.length);
    vm.showDetailsByDefault = !item.equipment && item.notransfer;
    vm.itemDetails = vm.showDetailsByDefault;

    dimDestinyTrackerService.getItemReviews(vm.item).then(() => $scope.$apply());

    // DTR 404s on the new D2 languages for D1 items
    let language = vm.settings.language;
    if (vm.item.destinyVersion === 1) {
      switch (language) {
        case 'es-mx':
          language = 'es';
          break;
        case 'pl':
        case 'ru':
        case 'zh-cht':
          language = 'en';
          break;
      }
    } else {
      // For D2, DTR uses English for es-mx
      switch (language) {
        case 'es-mx':
          language = 'es';
          break;
      }
    }
    vm.destinyDBLink = `http://db.destinytracker.com/d${vm.item.destinyVersion}/${
      vm.settings.language
    }/items/${vm.item.hash}`;

    if (vm.item.primStat) {
      vm.light = vm.item.primStat.value.toString();
    }
    if (vm.item.dmg) {
      vm.classes[`is-${vm.item.dmg}`] = true;
    }

    if (
      vm.item.classTypeName !== 'unknown' &&
      // These already include the class name
      vm.item.type !== 'ClassItem' &&
      vm.item.type !== 'Artifact' &&
      vm.item.type !== 'Class'
    ) {
      vm.classType =
        vm.item.classTypeNameLocalized[0].toUpperCase() + vm.item.classTypeNameLocalized.slice(1);
    }

    /*
    * Get the item stats and its stat name
    * of the equipped item for comparison
    */
    if (vm.item.equipment) {
      if (vm.compareItem) {
        $scope.$watch('vm.compareItem', compareItems);
      } else {
        $scope.$watch('$parent.$parent.vm.store.items', (items: DimItem[]) => {
          const item = (items || []).find((item) => item.equipped && item.type === vm.item.type);
          compareItems(item);
        });
      }
//.........這裏部分代碼省略.........

 SyncService.adapters.forEach((adapter) => {
   $scope.$watch(() => adapter.enabled, () => {
     refreshAdapter(adapter);
   });
 });

 private initCheckedState() {
   this.checked = true;
   this.$scope.$watch(() => this.checked, this.onToggled.bind(this));
 }

  private initSwitched(): void {
    this.checked = false;
    this.inputSwithed = false;

    this.$scope.$watch('vm.checked', this.onSwitched.bind(this));
  }

  this.$onInit = function() {
    this.reviewsEnabled = $featureFlags.reviewsEnabled;
    this.settings = settings;
    this.featureFlags = {
      colorA11y: $featureFlags.colorA11y
    };

    $scope.$watch(() => this.settings.itemSize, (size) => {
      document.querySelector('html')!.style.setProperty("--item-size", `${size}px`);
    });
    $scope.$watch(() => this.settings.charCol, (cols) => {
      document.querySelector('html')!.style.setProperty("--character-columns", cols);
    });
    $scope.$watch(() => this.settings.vaultMaxCol, (cols) => {
      document.querySelector('html')!.style.setProperty("--vault-max-columns", cols);
    });

    $scope.$watch(() => this.settings.charColMobile, (cols) => {
      // this check is needed so on start up/load this doesn't override the value set above on "normal" mode.
      if (isPhonePortrait()) {
        document.querySelector('html')!.style.setProperty("--character-columns", cols);
      }
    });
    // a subscribe on isPhonePortraitStream is needed when the user on mobile changes from portrait to landscape
    // or a user on desktop shrinks the browser window below isphoneportrait treshold value
    subscribeOnScope($scope, isPhonePortraitStream(), (isPhonePortrait) => {
      if (isPhonePortrait) {
        document.querySelector('html')!.style.setProperty("--character-columns", this.settings.charColMobile);
      } else {
        document.querySelector('html')!.style.setProperty("--character-columns", this.settings.charCol);
      }
    });

    hotkeys = hotkeys.bindTo($scope);

    hotkeys.add({
      combo: ['ctrl+alt+shift+d'],
      callback() {
        dimState.debug = true;
        console.log("***** DIM DEBUG MODE ENABLED *****");
      }
    });

    if ($featureFlags.colorA11y) {
      $scope.$watch(() => this.settings.colorA11y, (color) => {
        if (color && color !== '-') {
          document.querySelector('html')!.style.setProperty("--color-filter", `url(#${color.toLowerCase()})`);
        } else {
          document.querySelector('html')!.style.removeProperty("--color-filter");
        }
      });
    }

    // Show the changelog
    if ($featureFlags.changelogToaster) {
      $timeout(() => {
        showInfoPopup(`changelogv${$DIM_VERSION.replace(/\./gi, '')}`, {
          title: $i18next.t('Help.Version', {
            version: $DIM_VERSION,
            context: $DIM_FLAVOR
          }),
          body: changelog
        });
      });
    }

    try {
      localStorage.setItem('test', 'true');
      if (!window.indexedDB) {
        throw new Error("IndexedDB not available");
      }
    } catch (e) {
      console.log('storage test', e);
      $timeout(() => {
        showInfoPopup('no-storage', {
          title: $i18next.t('Help.NoStorage'),
          body: $i18next.t('Help.NoStorageMessage'),
          type: 'error',
          hideable: false
        }, 0);
      });
    }

    if (window.BroadcastChannel) {
      const updateChannel = new BroadcastChannel('precache-updates');

      const updateMessage = _.once(() => {
        $timeout(() => {
          showInfoPopup('update-available', {
            title: $i18next.t('Help.UpdateAvailable'),
            body: $i18next.t('Help.UpdateAvailableMessage'),
            type: 'warn',
            hideable: false
          }, 0);
        });
      });

      updateChannel.addEventListener('message', updateMessage);
      $scope.$on('$destroy', () => {
        updateChannel.removeEventListener('message', updateMessage);
//.........這裏部分代碼省略.........

function SearchFilterCtrl(
  this: IController & {
    account: DestinyAccount;
  },
  $scope: IScope,
  hotkeys,
  $i18next,
  $element: IRootElementService,
  ngDialog
) {
  'ngInject';
  const vm = this;
  vm.search = SearchService;
  vm.bulkItemTags = _.clone(itemTags);
  vm.bulkItemTags.push({ type: 'clear', label: 'Tags.ClearTag' });

  function getStoresService() {
    return vm.account.destinyVersion === 2 ? D2StoresService : D1StoresService;
  }

  let filters: SearchFilters;
  let searchConfig;
  let filteredItems: DimItem[] = [];

  subscribeOnScope($scope, isPhonePortraitStream(), (isPhonePortrait) => {
    $scope.$apply(() => {
      console.log('isPhonePortrait', isPhonePortrait);
      vm.placeholder = isPhonePortrait
        ? t('Header.FilterHelpBrief')
        : t('Header.FilterHelp', { example: 'is:dupe' });
    });
  });

  vm.$onChanges = (changes) => {
    if (changes.account && changes.account) {
      searchConfig = buildSearchConfig(vm.account.destinyVersion);
      filters = searchFilters(searchConfig, getStoresService());
      setupTextcomplete();
    }
  };

  let textcomplete;
  function setupTextcomplete() {
    if (textcomplete) {
      textcomplete.destroy();
      textcomplete = null;
    }
    const editor = new Textarea($element[0].getElementsByTagName('input')[0]);
    textcomplete = new Textcomplete(editor);
    textcomplete.register(
      [
        {
          words: searchConfig.keywords,
          match: /\b([\w:]{3,})$/i,
          search(term, callback) {
            if (term) {
              let words = this.words.filter((word: string) => word.includes(term.toLowerCase()));
              words = _.sortBy(words, (word: string) => word.indexOf(term.toLowerCase()));
              if (term.match(/\b((is:|not:|tag:|notes:|stat:)\w*)$/i)) {
                callback(words);
              } else if (words.length) {
                callback([term, ...words]);
              } else {
                callback([]);
              }
            }
          },
          // TODO: use "template" to include help text
          index: 1,
          replace(word) {
            word = word.toLowerCase();
            return word.startsWith('is:') && word.startsWith('not:') ? `${word} ` : word;
          }
        }
      ],
      {
        zIndex: 1000
      }
    );

    textcomplete.on('rendered', () => {
      if (textcomplete.dropdown.items.length) {
        // Activate the first item by default.
        textcomplete.dropdown.items[0].activate();
      }
    });

    $scope.$on('$destroy', () => {
      if (textcomplete) {
        textcomplete.destroy();
        textcomplete = null;
      }
    });
  }

  let searchInput;
  vm.$postLink = () => {
    searchInput = $element[0].getElementsByTagName('input')[0];
  };

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

 private initSelectedItem(): void {
   this.$scope.$watch('vm.selectedItem', this.onItemSelected.bind(this));
 }