Доступ к свойствам $scope изнутри службы в AngularJS

#javascript #angularjs #angularjs-scope #angularjs-service

#javascript #angularjs #angularjs-область #angularjs-сервис

Вопрос:

Я пытаюсь создать функцию-конструктор внутри службы angular, которую затем я мог бы использовать внутри своих разных контроллеров angular. Проблема в том, что мой объект, созданный из конструктора, нуждается в доступе к одному из свойств моего объекта $scope, чтобы правильно функционировать.

У меня есть реализация, работающая с нужной мне функциональностью, но она включает в себя передачу объекта $scope в функцию конструктора в качестве параметра. Есть ли лучший способ добиться этого? Есть ли какие-либо проблемы с тем, как я в настоящее время это реализовал?

HTML:

 <div ng-app="myApp">
    <div ng-controller="myController">
        <input type="text" ng-model="hello" />
        <br/>{{hello}}
        <br/>{{helloSayer.hello}}
        <br/>{{helloSayer.helloLength()}}
    </div>
</div>
 

JavaScript:

 var myApp = angular.module('myApp', []);

myApp.controller('myController', function myController($scope, myService) {
    $scope.hello = 'Hello from controller';

    $scope.helloSayer = new myService.HelloSayer($scope);
});

myApp.factory('myService', function () {
    var HelloSayer = function (controllerScope) {
        this.hello = 'Hello from service';
        this.helloLength = function () {
            return controllerScope.hello.length;
        };
    };

    return {
        HelloSayer: HelloSayer
    };
});
 

Вот рабочий код в скрипке: http://jsfiddle.net/dBQz4 /

Ответ №1:

Вы действительно не хотите передавать области видимости, они сложные звери. Более того, как правило, рекомендуется четко указывать, что вы передаете. Не отправляйте корову, если вам нужен только стакан молока.

 var myApp = angular.module('myApp', []);

myApp.controller('myController', function myController($scope, myService) {
    $scope.hello = 'Hello from controller';

    $scope.helloSayer = new myService.HelloSayer($scope.hello);
});

myApp.factory('myService', function () {
    var HelloSayer = function (controller_hello) {
        this.hello = 'Hello from service';
        this.helloLength = function () {
            return controller_hello.length;
        };
    };

    return {
        HelloSayer: HelloSayer
    };
});
 

Комментарии:

1. Я пробовал это на самом деле, и технически это работает, потому что свойство $scope, к которому мне нужно получить доступ, является объектом. Однако ваш пример не будет работать, потому что примитивные типы, в данном случае строка, передаются по значению, а не по ссылке.

2. С этим достаточно легко работать, просто добавьте this . спасибо HelloSlayer за сохранение controller_hello.

3. Странно, что MyService просто обходит конструктор, что на самом деле противоречит цели использования сервиса. Преимущество службы заключается в том, что у нее есть экземпляр, который является зависимостью, и одинаковый для всех, кто обращается к нему.

4. Есть ли лучшее место, чем служба в angular, для вставки объекта конструктора?

Ответ №2:

Имеет смысл передать область, с которой вам нужно работать. Это также упростит модульное тестирование сервиса.