如何从 angularjs 的两个不同位置调用相同的 function

Question

我有两个不同的 HTML 文件。 Select 按钮位于两个 html 文件中。 如果我单击该按钮，我需要 select 卡。

• 我有两个功能。 第一个默认情况下我需要在屏幕上显示。

• 第二个是我需要在弹出模式中显示相同的数据。

  1. 主页.html

 <button type="button" class="btn btn-primary col-xs-12 col-md-12 col-lg-12"
         ng-click="selectCard()">ADD CARD</button>

2. 页.html

<button type="button" class="btn btn-primary col-xs-12 col-md-12 col-lg-12" 
        ng-click="selectCard()">ADD CARD</button>

这些都是相同的 html 代码。

3. 主控制器.js

$scope.selectCard = function () {
    $scope.select = true;               
}

但我的问题是，

页。 html 文件处于弹出模式。

$scope.view = function () {
    $uibModal.open({
        templateUrl: 'page.html',
        size: 'lg',
        windowClass: 'page',
        controller: function ($scope, $uibModalInstance, $timeout) {          
          $scope.selectCard = function(){             
              $scope.select = true;
          }
        }
    });
}

在弹出模式中，我还需要再次编写相同的 function 。 然后只有它在工作。

有什么方法可以在两个地方使用相同的 function。

Answer 1

对于常用功能，服务是最好的地方。 您应该根据控制器中的要求将您的服务添加为依赖注入。

要创建和注入服务，您可以参考这个官方 angularjs 文档站点： https://docs.angularjs.org/guide/services

Answer 2

您可以将 function 移动到单独的服务中，并将其注入您需要的所有地方。

如果它应该绑定到mainController.js ，服务 function 可以使用rxJs Subject或只是发出事件来更新mainController.js中的值。