如何在angularjs服務中公開范圍？

Question

我試圖創建一種服務來存儲教程是否處於活動狀態的狀態，以便可以在不同的控制器之間共享該信息。 我還在為服務創建作用域，以便可以觀察值何時更改。 有沒有辦法向控制器公開服務中創建的作用域？

我已經嘗試過1）暴露scope變量和2）使用函數，但是似乎還有另一種方法。 在那兒？

HTML

<div ng-app="App">
    <h2>As variable</h2>
    <div ng-controller="tutorialController">
        <button ng-click="toggleActive()">Toggle</button>
        <div ng-show="tutorial.scope.isActive">Tutorial</div>
        <div ng-bind="tutIsActive"></div>
    </div>

    <hr/>

    <div ng-controller="tutorialController2">
        <h2>As function</h2>
        <button ng-click="toggleActive()">Toggle</button>
        <div ng-show="tutorial.isActive()">Tutorial</div>
        <div ng-bind="tutIsActive"></div>
    </div>
</div>

JS

var App = angular.module('App', [])

// 1: As variable

    .factory("Tutorial", ["$rootScope", function($rootScope) {
        var scope = $rootScope.$new();
        scope.isActive = true;

        scope.$watch('isActive', function() {
            console.log("1: isActive changed: " + scope.isActive);
        });

        return {
            scope: scope  
        };
    }])
    .controller('tutorialController', ["$scope", "Tutorial", function($scope, Tutorial) {
        $scope.tutorial = Tutorial;
        $scope.tutIsActive = $scope.tutorial.scope.isActive;

        $scope.toggleActive = function() {
            console.log("1: toggleActive");
            $scope.tutorial.scope.isActive = !$scope.tutorial.scope.isActive;
            $scope.tutIsActive = $scope.tutorial.scope.isActive;
        };
    }])

// 2: As function

    .factory("Tutorial2", ["$rootScope", function($rootScope) {
        var scope = $rootScope.$new();
        scope.isActive = true;

        scope.$watch('isActive', function() {
            console.log("2: isActive changed: " + scope.isActive);
        });

        return {
            isActive: function() {
                return scope.isActive;
            },
            toggle: function() {
                scope.isActive = !scope.isActive;   
            }
        };
    }])
    .controller('tutorialController2', ["$scope", "Tutorial2", function($scope, Tutorial) {
        $scope.tutorial = Tutorial;
        $scope.tutIsActive = $scope.tutorial.isActive();

        $scope.toggleActive = function() {
            console.log("2: toggleActive");
            $scope.tutorial.toggle();
            $scope.tutIsActive = $scope.tutorial.isActive();
        };
    }]);

JS小提琴

似乎2不是最佳實踐，因為它在表達式中使用函數 ，但是1似乎暴露了太多？ 還是我應該改用控制器？

Answer 1

您無需公開范圍。 只需將注入的教程附加到您需要的控制器作用域即可：

var App = angular.module('App', [])

App.factory("Tutorial", function() {
    return {
        isActive: true,
        toggleActive: function() {
            this.isActive = !this.isActive;
        }
    };
});

App.controller('tutorialController', function($scope, Tutorial) {
    $scope.tutorial = Tutorial;

    $scope.toggleActive = function() {
        $scope.tutorial.toggleActive();
    };
});

小提琴