Как открыть область действия в службе 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 fiddle

кажется 2 не лучшая практика, как это с помощью function within an expression, но 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(); 
    }; 
}); 

Fiddle