BinaryDevelop
  1. ホーム
  2. angularjs

[解決済み] angularですべてのコントローラで関数を利用できるようにすることはできますか？

2022-04-21 19:16:40

質問

効用関数がある場合 foo の中の任意の場所から呼び出せるようにしたい。 ng-app の宣言があります。モジュールの設定でグローバルにアクセスできるようにする方法はありますか？それとも、すべてのコントローラでスコープに追加する必要がありますか？

解決方法は？

基本的には、サービスとして定義するか、ルートスコープに配置するかの2つの選択肢があります。ルートスコープを汚染しないように、サービスを作ることをお勧めします。サービスを作成し、コントローラで利用できるようにするには、次のようにします。 

<!doctype html>
<html ng-app="myApp">
<head>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.angularjs.org/1.1.2/angular.min.js"></script>
    <script type="text/javascript">
    var myApp = angular.module('myApp', []);

    myApp.factory('myService', function() {
        return {
            foo: function() {
                alert("I'm foo!");
            }
        };
    });

    myApp.controller('MainCtrl', ['$scope', 'myService', function($scope, myService) {
        $scope.callFoo = function() {
            myService.foo();
        }
    }]);
    </script>
</head>
<body ng-controller="MainCtrl">
    <button ng-click="callFoo()">Call foo</button>
</body>
</html>

それが難しい場合は、このようにルートスコープに追加することができます。 

<!doctype html>
<html ng-app="myApp">
<head>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.angularjs.org/1.1.2/angular.min.js"></script>
    <script type="text/javascript">
    var myApp = angular.module('myApp', []);

    myApp.run(function($rootScope) {
        $rootScope.globalFoo = function() {
            alert("I'm global foo!");
        };
    });

    myApp.controller('MainCtrl', ['$scope', function($scope){

    }]);
    </script>
</head>
<body ng-controller="MainCtrl">
    <button ng-click="globalFoo()">Call global foo</button>
</body>
</html>

そうすることで、すべてのテンプレートが globalFoo() をコントローラからテンプレートに渡す必要がありません。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します