angularjs - Call from Plain JavaScript to Angular Service to Controller -


i using $rootscope.$emit() raising events service controller.

it working fine when emitting instance of service referenced in controller $rootscope.$on not getting called when emitting instance of service got angular injector in plain javascript .

following code

plain javascript

    var msghandlerjs = function () {     var injector = angular.injector(['ng', 'services']);     var amsghandlerservice = injector.get('msghandlerservice');      amsghandlerservice.testscopewatch(); }

calling above when dom ready :

angular.element(document).ready(function () {         msghandlerjs(); });

service

(function (module) {          var msghandlerservice = function ($rootscope, $http, $q, $timeout) {           var testscopewatch = function () {             $http.get('~/test.json').then(function (result) {                 emailpacket = result.data.packet;                  $rootscope.$emit("emailpacketchanged", emailpacket);                  });         };          return {             //making public             testscopewatch:testscopewatch,         };     };      module.factory("msghandlerservice", ["$rootscope","$http", "$q","$timeout", msghandlerservice]);  }(angular.module("services")));

controller

(function (module) {        function testcontroller($rootscope,$scope, msghandlerservice) {         $rootscope.$on("emailpacketchanged", function(event,data){             alert('here am');         };     };      module.controller("testcontroller", ["$rootscope","$scope", "msghandlerservice",  testcontroller]);      }(angular.module('app')));

you need proper injector of application, angular.injector creates new injector, has nothing injector bootstrapped app. instance of service (yourservice, rootscope inside it) injector different instance in app. should instead use getter .injector() rootelement of application.

i.e if have ng-app or manually bootstrapping, injector out of element. example:

 var injector = angular.element(document.queryselector('[ng-app]')).injector();

if app root document (html) injector document i.e :

var injector = angular.element(document).injector()

also if want scope bindings reflect need invoke digest cycle (alert work fine ofcourse):

var msghandlerjs = function() {    var injector = angular.element(document).injector();    var amsghandlerservice = injector.get('msghandlerservice');    var $rootscope = injector.get('$rootscope');    amsghandlerservice.testscopewatch();    $rootscope.$digest(); } 

(function(module) {      var msghandlerservice = function($rootscope, $http, $q, $timeout) {      var testscopewatch = function() {        //$http.get('~/test.json').then(function(result) {        //  emailpacket = result.data.packet;          $rootscope.$emit("emailpacketchanged", {});        // });      };        return {        //making public        testscopewatch: testscopewatch,      };    };      module.factory("msghandlerservice", ["$rootscope", "$http", "$q", "$timeout", msghandlerservice]);    }(angular.module("services", [])));    (function(module) {    function testcontroller($rootscope, $scope, msghandlerservice) {      $rootscope.$on("emailpacketchanged", function(event, data) {        $scope.got = "got message!!";      });    }      module.controller("testcontroller", ["$rootscope", "$scope", "msghandlerservice", testcontroller]);    }(angular.module('app', ['services'])));    var msghandlerjs = function() {      var injector = angular.element(document.queryselector('[ng-app]')).injector();    var amsghandlerservice = injector.get('msghandlerservice');    var $rootscope = injector.get('$rootscope');    amsghandlerservice.testscopewatch();    $rootscope.$digest();  }  angular.element(document).ready(function() {    msghandlerjs();  });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>  <div class="test" ng-app="app" ng-controller="testcontroller">    {{got}}  </div>


Comments

Post a Comment

Popular posts from this blog

javascript - Bootstrap Popover: iOS Safari strange behaviour -

i looking through twitter bootstrap documentation, , i'm interested in implementing dismissible popover when button clicked. here example bootstrap's docs: http://getbootstrap.com/javascript/#dismiss-on-next-click when press "dismissible popover" button os x safari browser works fine. when access same link above ios safari, button not work. is, popover not dismissed on click. why button not working ios safari? the example linked using data-trigger="focus" attribute. try changing data-trigger="click" . <a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="click" title="dismissible popover" data-content="and here's amazing content. it's engaging. right?">dismissible popover</a>
Read more

Magento/PHP - Get phones on all members in a customer group -

i working on custom magento extension. working around adminhtml part , i've created custom form there. here form code: <?php class vivasindustries_smsnotification_block_adminhtml_sms_sendmass_edit_form extends mage_adminhtml_block_widget_form { public function _preparelayout() { $extensionpath = mage::getmoduledir('js', 'vivasindustries_smsnotification'); $head = $this->getlayout()->getblock('head'); $head->addjs('jquery.js'); $head->addjs('vivas.js'); return parent::_preparelayout(); } protected function _prepareform() { $form = new varien_data_form(array( 'id' => 'edit_form', 'action' => $this->geturl('*/*/save', array('id' => $this->getrequest()->get...
Read more

session - Logging Out Using PHP -

i have seen other programs regarding can't seem make work. doing wrong? want achieve after user logged out, going previous pages become restricted. i have 3 php files: 1. sample.php - main page username , password filled in 2. successful.php - user's page after logging in 3. logout.php - destorys session hinder user access pages after logging out sample.php </html> <form action="" method="post"> <table> <tr> <td>username:</td> <td>password:</td> </tr> <tr> <td><input type="text" name="username"></td> <td><input type="password" name="password"></td> </tr> <tr> <td><input type="submit" value="submit" name="submit"></td> </tr> </table> </form> </html> <?php $servername = "localhost"; $username = ...
Read more