Совместное использование переменной между контроллером и фабрикой

Question

У меня есть переменная $ scope.name, определенная в контроллере, которую я передаю фабрике MyService как

$scope.name = MyService.name;

Внутри фабрики есть

var myserivce = {};
myservice.open = function() {
    myservice.name = 'abc';
};
return myservice;

Я хочувернуть myservice.name, чтобы abc хранился в $ scope.name

Как я могу это сделать?Без использования rootScope

Answer 1

Если я правильно понимаю вашу проблему, то вам нужно, чтобы контроллер знал, что переменная имени изменена в Service, и представление должно быть обновлено на основе этого.

Это можно сделать одним из 3 способов:

1. Использование rootScope - плохой способ
2. Использование наблюдателей - Ok way
3. Использование паб / субмоделей

angular
	.module("myApp", [])
	.controller("CtrlList", CtrlList)
	.service("MyService", MyService);

CtrlList.$inject = ["$scope", "MyService"];
MyService.$inject = ["$q", "$timeout"];

function CtrlList($scope, MyService) {
	
	MyService.name.subscribe(function(name) {
		$scope.name = name;
	});

	$scope.$watch(
		function() {
			return MyService.age;
		},
		function(newValue, oldValue) {
			$scope.age = MyService.age;
			console.log(newValue + " " + oldValue);
			console.log(MyService.age);
		}
	);

	MyService.open();
}

function MyService($q, $timeout) {
	var myservice = { name: new rxjs.Subject(), age: 1 };

	myservice.open = function() {
		$timeout(function() {
			myservice.name.next("Value Changed.");
			myservice.age = 2;
		}, 10000);
		myservice.name.next("Initial Value.");
	};

	return myservice;
}

* {
  font-family: "Work Sans";
  padding: 0;
  margin: 0;
}

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #F6F7EB;
}

.wrapper {
  width: 500px;
  border: 1px dotted gray;
  padding: 10px;
}
.wrapper .heading {
  font-size: 30px;
  margin-bottom: 12px;
}
.wrapper p {
  margin-bottom: 6px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.3.3/rxjs.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Work+Sans:400' rel='stylesheet' type='text/css'>
<section class="wrapper">
  <p class="heading">AngularJS v1.7.5 - Wait for 10 seconds to see changes</p>
  <div ng-app="myApp">
    <div class="container" ng-controller="CtrlList">
      <p>This value is changed through rxjs   : {{ name }}</p>
      <p>This value is changed through watcher: {{ age }}</p>
    </div>
  </div>
</section>

Answer 2

Хранение общих данных на фабрике или в сервисе:

app.factory('Holder', function() {
  return {
    name : 'abc'
  };
});

app.controller('YourCtrl', function($scope, Holder) {
  $scope.Holder = Holder;
  var name = $scope.Holder.name;
});

Это может помочь вам.

Answer 3

В JavaScript переменные используются совместно, присваивая их свойствам объекта и передавая ссылку на этот объект.

app.factory("share", function() {
    var objectRef = {};
    return {
        set: set,
        get: get,
        getRef: getRef,
    };
    function set(prop, val) {
        objectRef[prop] = val;
    }
    function get(prop) {
        return objectRef[prop];
    }
    function getRef() {
        return objectRef;
    }
});

Метод share.get(prop) возвращает значение свойства в тот момент, когдафункция вызывается.Любые изменения не будут обновлять ранее возвращенные значения.

Метод share.getRef() возвращает ссылку на объект.Когда содержимое объекта изменяется, каждый объект, имеющий ссылку на этот объект, будет делиться этими изменениями.