组件上的代码冗余和简化

Question

在下一个组件上，我想简化代码：

此功能可以完美运行，但我认为它可以进一步简化，我对组件中$watch的使用感到怀疑。

我想知道我们是否只能调用一次在loadJsonAdvertising()和$onInit中第一次调用的函数$watch，因为在$watch中{如果我不叫{1}}对象，则它没有电源。

理想的应用程序属性，JsonAdvertising（）。

$ watch仅允许您检查块ctrl.advertising的大小是否应减小。

如果有解决方案？

Component.js

<adversiting-code>

组件调用：

(function() {
  'use strict';
  angular.module('App').component('adversitingCode', {
    templateUrl: 'adversiting.component.html',
    bindings: {
      obj: '<',
      ngClass: '<',
      advertisingName: '@'
    },
    controllerAs: '$ctrl',
    controller: function($http, $cookies, $scope, $q) {
      var ctrl = this;
      ctrl.$onInit = function() {
        ctrl.loadJsonAdvertising(ctrl.advertisingName).then(function(result) {
          ctrl.advertising = result;
        });
      };

      ctrl.loadJsonAdvertising = function(data) {
        var deferred = $q.defer();
        $http.get('assets/json/select-box/' + data).then(function(result) {
          let dataList = result.data.reduce(function(result, current) {
            return Object.assign(result, current);
          }, {});
          deferred.resolve(dataList);
          return deferred.promise;
        });
      };

      $scope.$watch('$ctrl.ngClass', function(clazz) {
        ctrl.loadJsonAdvertising(ctrl.advertisingName).then(function(result) {
          ctrl.advertising = result;
          if (!!clazz && !!clazz.small) {
            ctrl.size = 'small';
            ctrl.poster = ctrl.advertising.poster.small;
          } else {
            ctrl.size = 'large';
            ctrl.poster = ctrl.advertising.poster.large;
          }
        });
      });
    }
  });
})();