У меня есть приложение Angular из следующих уровней:
-
service()
используется для вычислений и обработки данных -
factory()
используется как общее хранилище данных для нескольких контроллеров. - несколько
controllers()
Мой контроллер предоставляет функцию из factory, которая, в свою очередь, вызывает функцию из службы. В HTML я запускаю функцию контроллера и вывод на экран пользователю: {{ controller.function() }}
.
Я заметил, что при загрузке страницы и при каждом последующем изменении модели controller.function()
выполняется дважды. Почему это происходит? Как я могу избежать ненужного вызова?
См. рабочий пример - откройте консоль JS вашего браузера, нажмите Run
и обратите внимание, что строка console.log()
выполняется два раза.
JavaScript
angular.module('myApp',[])
.service('Worker', [function() {
this.i = 0;
this.sample = function(data) {
console.log(this.i.toString() + " " + Math.random().toString());
return JSON.stringify(data);
};
}])
.factory('DataStorage', ['Worker', function(worker) {
var self = this;
self.data = [{}, {}];
self.getData = function() {
return self.data;
}
self.sample = function() {
return worker.sample(self.data);
};
return {
getData: self.getData,
sample: self.sample
};
}])
.controller('MainController', ['DataStorage', function(DataStorage) {
var self = this;
self.data = DataStorage.getData();
self.sample = DataStorage.sample;
}])
.controller('DataSource', [function() {
var self = this;
self.data = ["one", "two", "three", "four", "five", "six"];
}])
HTML
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script data-require="[email protected]" data-semver="1.5.8" src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="MainController as main">
<div ng-controller="DataSource as datasource">
<div ng-repeat="select in main.data">
<select ng-model="select.choice" ng-options="value for value in datasource.data">
<option value="">-- Your choice --</option>
</select>
</div>
<pre>
{{ main.sample() }}
</pre>
</div>
</body>
</html>
Почему эта функция запускается несколько раз для каждой отдельной модели и как я могу убедиться, что она работает только один раз?
Я попытался назначить вывод функции factory в переменную контроллера (и использовать {{ controller.function }}
в HTML - отметить отсутствие круглых скобок), но тогда функция запускается только один раз. Он должен работать с новыми данными при изменении модели.
Аналогичные проблемы, описанные в StackOverflow, относятся к модулю ng-route, который я не использую.