javascript - AngularJS 模式中的 $scope 不会将数据传递到模板中

Question

我是 AngularJS 新手。我创建了以下 Controller ，它显示结果列表并在单击特定按钮时打开模式:

angular.
module('panelList')
  .component('panelList', {
  templateUrl: '/panel-list/panel-list.template.html',
  controller: ['Panel', 'PanelSelection', '$scope', '$location', '$uibModal',
    function PanelListController(Panel, PanelSelection, $scope, $location, $uibModal) {

      $scope.maxAbv = 2;
      $scope.minAbv = 12;
      $scope.maxIbu = 0;
      $scope.minIbu = 100;

      this.allPanelsRetrieved = (index, before, filterParams) => {
        let allPanels = before;
        const params = Object.assign({},
          { page: index, per_page: 80 },
          filterParams);
        Panel.query(params).$promise.then(data => {
          if (data.length > 0) {
            allPanels.push(...data);
            return this.allPanelsRetrieved(index+1, allPanels, filterParams);
          } else {
            return allPanels;
          }
        });
        return allPanels;
      };

      $scope.getPanels = () => {
       const filterParams = {};
       filterParams.abv_lt = $scope.minAbv;
       filterParams.abv_gt = $scope.maxAbv;
       filterParams.ibu_lt = $scope.minIbu;
       filterParams.ibu_gt = $scope.maxIbu;
       $scope.currentPagePanels = this.allPanelsRetrieved(1,[], filterParams);
      };

      $scope.showDetails = (panelSelected) => {
        PanelSelection.setPanelSelected(panelSelected);
        $uibModal.open({
          component: "panelDetail",
          scope: $scope,
          bindToController: true,
        })
      };
  }]
});

此处指定模态 Controller :

angular.
module('panelDetail').
component('panelDetail', {
  templateUrl: '/panel-detail/panel-detail.template.html',
  controller: ['PanelSelection', '$scope','$uibModal',
    function PanelDetailController(PanelSelection, $scope, $uibModal, $uibModalInstance) {

      $scope.ok = () => {
        $uibModalInstance.close();
      };

      let panelSelected = PanelSelection.getPanelSelected();
      $scope.panel = panelSelected;
      console.log(panelSelected);
      $scope.foodPairings = panelSelected.food_pairing.join(", ");
      $scope.allIngredients = this.getFormattedIngredients(panelSelected.ingredients);
      $scope.method = this.getFormattedMethod(panelSelected.method);

      this.getFormattedIngredients = (ingredients) => {
        const listOfIngredients = [];
        Object.keys(ingredients).forEach(key => {
          if(Array.isArray(ingredients[key])){
            for(let ingredient of ingredients[key]){
              listOfIngredients.push(
                `- ${ingredient.name} ${key} (${ingredient.amount.value} ${ingredient.amount.unit})`
                  .concat(ingredient.add != undefined ? ', added in the '+ingredient.add:'',
                    ingredient.attribute != undefined ? ', attribute: '+ingredient.attribute:'','.')
              );
            }
          }else{
            listOfIngredients.push(`- ${ingredients[key]} ${key}.`);
          }
        });
        return listOfIngredients;
      };

      $scope.getFormattedMethod = (method) => {
        const listOfMethodProcedures = [];
        Object.keys(method).forEach(key => {
          if(Array.isArray(method[key])){
            for(let methodProcedure of method[key]){
              listOfMethodProcedures.push(
                `- ${key} at ${methodProcedure.temp.value} ${methodProcedure.temp.unit} `
                  .concat(methodProcedure.duration != undefined ? 'for '+methodProcedure.duration +' min.' : '.')
              );
            }
          }else{
            listOfMethodProcedures.push(`- ${key}.`);
          }
        });
        return listOfMethodProcedures;
      };
  }
  ]
});

模式已正确打开，但内部的值并未像应有的那样从范围中获取，而是显示为 {{value}}。简而言之，传递的 $scope 并不充当作用域。此外，我收到以下错误:

TypeError: this.getFormattedIngredients is not a function at new PanelDetailController

错误可能出在哪里？如何成功地将范围从一个 Controller 传递到另一个 Controller 以进行模态？

Answer 1

使用以下方式传递值，而不是 scope: $scope

resolve: { scope: $scope }