我如何在angularjs服务暴露范围是什么？ [英] How do I expose scope in an angularjs service?

问题描述

我试图创建一个服务来存储的教程是否处于活动状态不在状态，让我可以分享不同之中控制器，信息。我也开创了服务范围，这样我就可以当腕表的价值变化。有没有一种方法来公开服务创建到控制器的范围是什么？

I'm trying to create a service to store the state of whether a tutorial is active or not, so that I can share that information amongst different controllers. I'm also creating a scope for the service, so that I can watch when the value changes. Is there a way to expose the scope created in the service to the controller?

我已经与1试过）露出范围变量，并用功能2），但是看起来会有另一种方式。有没有？

I've tried it with 1) exposing the scope variable and 2) using a function, but it seems like there would be another way. Is there?

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是不是最好的做法，因为它使用的是前$ P $内的功能pssion ，但是1好像它暴露太多了？或者，也许我应该使用控制器呢？

It seems 2 is not best practice, as it is using a function within an expression, but 1 seems like it's exposing too much? Or maybe I should be using a controller instead?

推荐答案

您不必暴露范围。刚刚注入的教程连接到您的控制器范围在你需要它：

You don't need to expose a scope. Just attach the injected tutorial to your controller scope where you need it:

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();
    };
});

小提琴

这篇关于我如何在angularjs服务暴露范围是什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！