Значение привязки Angularjs от сервиса - PullRequest
Новая
       11

Значение привязки Angularjs от сервиса

0 голосов
/ 12 ноября 2018

Я хочу разделить значение службы между одним или несколькими контроллерами (только один в следующем примере, но это не главное).

Проблема в том, что значение удержания в сервисе не связано и отображается в представлении.

Код (полученный из примера базового сервиса angularjs): 

(function(angular) {
    'use strict';
angular.
module('myServiceModule', []).
    controller('MyController', ['$scope', 'notify','$log', function($scope, notify, $log) {
    $scope.callNotify = function(msg) {
        notify.push(msg);
    };

    $scope.clickCount = notify.clickCount();
    $log.debug("Click count is now", $scope.clickCount);
    }]).
factory('notify', ['$window','$log', function(win,$log) {
    var msgs = [];
    var clickCounter = 0;
    return {
        clickCount: function() {
            clickCounter = msgs.length;
            $log.debug("You are clicking, click count is now", clickCounter);
            return clickCounter;
            },
        push: function(msg) {
                msgs.push(msg);
                clickCounter = msgs.length;
                $log.debug("Counter is", clickCounter);
                if (msgs.length === 3) {
                win.alert(msgs.join('\n'));
                msgs = [];
                }
            }
        }
    }]);

Я хочу, чтобы счетчик отображался на странице: 

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-services-usage-production</title>


<script src="//code.angularjs.org/snapshot/angular.min.js"></script>
<script src="script.js"></script>



</head>
<body ng-app="myServiceModule">
<div id="simple" ng-controller="MyController as self">
<p>Let's try this simple notify service, injected into the controller...</p>
<input ng-init="message='test'" ng-model="message" >
<button ng-click="callNotify(message);">NOTIFY</button>
<p>(you have to click {{3-self.clickCount}} times more to see an alert)</p>
</div>
<div>You have clicked {{clickCount}} times</div>
</body>
</html>

См. Это в действии на Плункер

ОБНОВЛЕНИЕ: исправлены тривиальные ошибки: html и сервисный код в соответствии с предложением @SehaxX

1 Ответ

0 голосов
/ 12 ноября 2018

Сначала ваш HTML неверен.Ваш последний div не находится в div Контроллера, и вам не нужен сам. 

<body ng-app="myServiceModule">
   <div id="simple" ng-controller="MyController">
     <p>Let's try this simple notify service, injected into the controller...</p>
     <input ng-init="message='test'" ng-model="message" >
     <button ng-click="callNotify(message);">NOTIFY</button>
     <p>(you have to click {{3-self.clickCount}} times more to see an alert)</p>
     <div>You have clicked {{clickCount}} times</div>
  </div>    
</body>

Также в вашем обслуживании вы пропускаете return: 

clickCount: function() {
            clickCounter = msgs.length;
            $log.debug("You are clicking, click count is now", clickCounter);
            return clickCounter;
          },

И в вашем контроллере вытолько один раз вызовите notify.clickCount (), поэтому вам необходимо добавить его к методу: 

$scope.callNotify = function(msg) {
      notify.push(msg);
      $scope.clickCount = notify.clickCount();
      $log.debug("Click count is now", $scope.clickCount);
    };

Здесь также работает кодовое перо с «Controller as self», если хотите.Но тогда в контроллере вы должны использовать это, а не $ scope.

Cheers,

...