如何从angularjs中的两个不同位置调用同一函数

时间:2019-09-20 13:33:31

标签: javascript html css angularjs

我有两个不同的HTML文件。选择按钮在两个html文件中。如果单击该按钮,则需要选择卡。

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

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

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

这两个都是相同的html代码。

  1. mainController.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;
          }
        }
    });
}

在这里,我还需要再次编写相同的函数。然后只有它起作用了。

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

2 个答案:

答案 0 :(得分:1)

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

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

答案 1 :(得分:0)

您可以将功能移至单独的服务,然后将其注入所需的所有位置。

如果应将其绑定到mainController.js,服务功能可以使用rxJs Subject或只发出事件来更新mainController.js中的值。