Добавление обработчика событий в методе angularjs не работает должным образом

0

По причинам, по которым я бы не стал здесь заниматься, я добавляю список событий в заводском методе (serviceAFunction) против контроллера. Когда я нажимаю цепочку вызовов, она не работает. Я получаю сообщение "Uncaught TypeError: this.serviceC is not a function" в консоли браузера. Что я делаю не так?

Я пробовал подход Prototype, а также показан в следующем фрагменте, но больше не повезло.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>My Angular App</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
  <script type="text/javascript">
      (function () {
          'use strict';
          function myFactory($http) {
              var service = {
                  serviceA: serviceAFunction,
                  serviceB: serviceBFunction,
                  serviceC: serviceCFunction,
                  serviceD: serviceDFunction,
                  callParams: {}
              };
              return service;
              function serviceAFunction() {
                  alert("From A service");
                  document.getElementById("myBtn").addEventListener("click", this.serviceB);
                  //document.getElementById("myBtn").addEventListener("click", function () { alert(1);});
                  //document.getElementById("myBtn").addEventListener("click", $scope.doSomeThing);
                  this.serviceB();
              }
              function serviceBFunction() {
                  alert("From B service");
                  // During click event the following call fails.
                  this.serviceC();
              }
              function serviceCFunction() {
                  alert("From C service");
                  this.serviceD();
              }
              function serviceDFunction() {
                  alert("From D service");
              }
          }
          function myController($scope, $controller, myFactory) {
              $scope.doSomeThing = function () {
                  myFactory.serviceA();
              };
              myFactory.serviceA();
          }
          angular.module('myApp', []);
          angular.module('myApp').factory('myFactory', myFactory);
          myFactory.$inject = ['$http'];
          angular.module('myApp').controller('myController', myController);
          myController.$inject = ['$scope', '$controller', 'myFactory'];

      }())
  </script>
</head>
<body>
<div data-ng-app="myApp">
  <div data-ng-controller="myController">
    <h1>Here we go...</h1>
    <div id='MyTrial'>
      <input id="myBtn" type="button" value="Click Me"  />
    </div>
  </div>
</div>
</body>
</html>

Прототипный подход. Здесь нет успеха.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>My Angular App</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
  <script type="text/javascript">
      (function () {
          'use strict';
          function myFactory() {
              function Factory($scope) {
                  this.$scope = $scope;
              }
              Factory.prototype.serviceA = serviceAFunction;
              Factory.prototype.serviceB = serviceBFunction;
              Factory.prototype.serviceC = serviceCFunction;
              Factory.prototype.serviceD = serviceDFunction;
              return Factory;
              function serviceAFunction() {
                  alert("From A service");
                  document.getElementById("myBtn").addEventListener("click", this.$scope.newFactory.serviceB);
                  //document.getElementById("myBtn").addEventListener("click", function () { alert(1);});
                  //document.getElementById("myBtn").addEventListener("click", $scope.doSomeThing);
                  this.serviceB();
              }
              function serviceBFunction() {
                  alert("From B service");
                  // What ever I do here, during click event the following call fails.
                  this.$scope.newFactory.serviceC();
              }
              function serviceCFunction() {
                  alert("From C service");
                  this.$scope.newFactory.serviceD();
              }
              function serviceDFunction() {
                  alert("From D service");
              }
          }
          function myController($scope, $controller, myFactory) {

              $scope.doSomeThing = function () {
                  //myFactory.serviceA();
              };
              $scope.newFactory = new myFactory($scope);
              $scope.newFactory.serviceA();
          }
          angular.module('myApp', []);
          angular.module('myApp').factory('myFactory', myFactory);
          //myFactory.$inject = ['$scope'];
          angular.module('myApp').controller('myController', myController);
          myController.$inject = ['$scope', '$controller', 'myFactory'];
      }())
  </script>
</head>
<body>
<div data-ng-app="myApp">
  <div data-ng-controller="myController">
    <h1>Here we go...</h1>
    <div id='MyTrial'>
      <input id="myBtn" type="button" value="Click Me"  />
    </div>
  </div>
</div>
</body>
</html>
Теги:

2 ответа

1
Лучший ответ

Кажется, это проблема с javascript.

Вы должны кэшировать родительскую область следующим образом:

var self = this;
function serviceBFunction() {
    alert("From B service");
    // During click event the following call fails.
    self.serviceC();
}
Поделиться
  • 0
    :(. Я получаю Uncaught TypeError: Невозможно прочитать свойство 'serviceC' из неопределенного
  • 1
    Я имею в виду, в вашем случае this service переменная
Показать ещё 6 комментариев
0

Почему вы выполняете функцию jquery onclick в Factory? Есть ли необходимость.

Если вы хотите, чтобы служба вызова B нажала кнопку, вызовите этот метод через контроллер.

Когда вы используете jquery onclick, то здесь это будет действовать как элемент, который вы на самом деле пытаетесь сделать $ (element). Таким образом, у этого не будет набора методов/переменных, где будут удерживаться угловые фабрики.

Но в Угловом сценарии это другое. Поскольку вам нужно отлаживать объемные или заводские функции, тогда сделайте свою логику кода на фабрике вместо функций jquery onclick.

<head>
  <title>My Angular App</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
  <script type="text/javascript">
      (function () {
          'use strict';
          function myFactory($http) {
              var service = {
                  serviceA: serviceAFunction,
                  serviceB: serviceBFunction,
                  serviceC: serviceCFunction,
                  serviceD: serviceDFunction,
                  callParams: {}
              };
              return service;
              function serviceAFunction() {
                  alert("From A service");
                
                 // document.getElementById("myBtn").addEventListener("click", this.serviceB);
                  //document.getElementById("myBtn").addEventListener("click", function () { alert(1);});
                  //document.getElementById("myBtn").addEventListener("click", $scope.doSomeThing);
                  this.serviceB();
              }
              function serviceBFunction() {
                  alert("From B service");
                  // During click event the following call fails.
                  this.serviceC();
              }
              function serviceCFunction() {
                  alert("From C service");
                  this.serviceD();
              }
              function serviceDFunction() {
                  alert("From D service");
              }
          }
          function myController($scope, $controller, myFactory) {
              $scope.doSomeThing = function () {
                  myFactory.serviceB();
              };
              myFactory.serviceA();
          }
          angular.module('myApp', []);
          angular.module('myApp').factory('myFactory', myFactory);
          myFactory.$inject = ['$http'];
          angular.module('myApp').controller('myController', myController);
          myController.$inject = ['$scope', '$controller', 'myFactory'];

      }())
  </script>
</head>
<body>
<div data-ng-app="myApp">
  <div data-ng-controller="myController">
    <h1>Here we go...</h1>
    <div id='MyTrial'>
      <input id="myBtn" type="button" ng-click="doSomeThing()" value="Click Me"  />
    </div>
  </div>
</div>
</body>
Поделиться
  • 0
    В приложении я использую d3 (d3js.org), а в одном из заводских методов добавляются некоторые обработчики событий. Так что я показал здесь урезанную версию. Я уже попробовал то, что вы предложили, и это не то, что я хочу.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню