使用可以在 Angular 中的所有组件之间共享的范围

Question

我有一个使用一种方法的简单控制器：

app.controller('MyApp', function($scope) {
     $scope.myMethod() {...}
}

我还有很多用于输入字段的组件（例如用于文本输入、数字输入、复选框、收音机等）：

app.component('TextInput', {
    template: "<input type='text' ng-change='$ctrl.myMethodInComponent()' ng-model='inp' />",
    bindings: {
        myMethod: '&',
    },
    controller: function() {
        var ctrl = this;
        ctrl.myMethodInComponent = function() {
            /* some customizations */
            ctrl.myMethod();
        }
    }
});

我按以下方式创建此输入：

<text-input myMethod="myMethod()"></text-input>

一切都按预期工作，但问题是我有很多组件想使用主控制器的方法 'myMethod'，我不想使用绑定（'&' ). 相反，我想在 mainScope 之类的东西中使用这个方法。我知道 Angular 提供了 rootScope，但我不知道如何在我的案例中使用它。是否有可能将 'myMethod' 附加到将在我的所有组件之间共享的某个主要（根）范围？

Answer 1

你想做的事情可以通过服务和工厂来实现。仔细研究一下，如果您需要帮助或模板，请问我。

编辑模板

app.factory('myFactory', function($scope)
    var ret = {
        myMethod: myMethod,
        myMethodWithParams: myMethodWithParams
    }
    return ret;

    function myMethod() {...}
    function myMethodWithParams(param1, param2) {...}
}

现在，在您的控制器中，您可以将其用作依赖项

app.controller('myController', function(myFactory) {
    var x = myFactory.myMethod();
    var y = myFactory.myMethodWithParams('hello', 'world');
});

Answer 2

不确定这是您使用 $rootScope 寻找的那种用例，但这里有一个解决方案：

    angular.module('myApp', [])

    .controller('MyController', function ($scope, $rootScope) {
        $scope.message = 'Hello from Controller 1';

        $scope.$watch('message', function () {
            $rootScope.$emit('controller1_scope_change', {
                message: $scope.message
            });
        });

    }).controller('MyController2', function ($scope, $rootScope) {
        $scope.message = 'Hello from Controller 2, here is the output from Controller 1:';

        $rootScope.$on('controller1_scope_change', function (event, args) {
            console.log('arguments received by the handler for the event: ', args);
            $scope.message2 = args.message;
        });

        // really hacky way of doing it
        /*var controller1_scope = angular.element(document.querySelector('#controller1')).scope();
        controller1_scope.$watch(function () {
            $scope.message2 = controller1_scope.message
        });*/
    });

View example here on codepen

使用可以在 Angular 中的所有组件之间共享的范围

Using scope which can be shared between all components in Angular

angularjs

angularjs-scope

angularjs-components