2

I'm writing a Google Chrome extension which will interact directly with an AngularJS app.

Data is passed into Chrome's localstorage (chrome.storage.local) in one page, and then retrieved when the user loads my app's page.

The Angular is basically just a form with ng-models attached, like so:

 <input id="q1" ng-model="inputName" >
 <input id="q2" ng-model="inputTitle" >
 <input id="q3" ng-model="inputAge" >

 <button ng-click='submit()' >

The submit() function saves the ng-model values to my database to be retrieved later.

There are similar questions here which use older versions of AngularJS and I cannot get to work with Angular 1.2+ (I'm on Angular 1.2.2).

I've tried:

$('#q1').val(obj.title).trigger('input');

I've also tried: 

$('#q1').val(obj.title);
angular.element($('#q1')).triggerHandler('input');

Neither work, in fact the latter makes no value change occur at all. What's the fix?

EDIT: Here's the Angular function being called on click, if there's something I can do in here to force ng-model to check the html input's value (that was set by jQuery in the Google Chrome extension) then that could be a solution:

 $scope.submit = function(){

        var theEvent = {
            inputTitle: $scope.inputTitle,
            inputName: $scope.inputName,
            inputAge: $scope.inputAge
        };

        $rootScope.existing = theEvent;

        $http({
            url: '/api/saveToMongo/newEvent',
            method: "POST",
            data: theEvent
        }).
        success(function(data, status, headers, config) {

            $cookies.oldSession = data;

            $location.path('/collect');
        }).
        error(function(data, status, headers, config) {
          console.log("There was an error submitting!");
        });

    };

All of these are returning null when I submit to my database, although if I type in the values manually then they work fine.

Community
  • 1
  • 1
JVG
  • 20,198
  • 47
  • 132
  • 210
  • Does ng-click(submit()) really work ? I mean, instead of ng-click="submit()" ? – enguerranws Feb 13 '15 at 07:56
  • I really would see the full angular controller : you are trying to change HTML element value, when you should change (e.g.) $scope property value. – enguerranws Feb 13 '15 at 07:58
  • @enguerranws Apologies, that's an error in my questions, will update. Will chuck in the `$scope.submit()` function, but as mentioned above I'm trying to change the `input`'s value via jQuery (which is being called from within a Google Chrome extension), which I in turn want to force the `ng-model` to update. – JVG Feb 13 '15 at 08:13
  • I really just want to be able to tell Angular (probably within `$scope.submit()` to check the value of the html `inputs` and update the `ng-models`... – JVG Feb 13 '15 at 08:25
  • can't you re-set $scope.inputTitle (etc.) in $http.success() ? e.g. $scope.inputTitle = data.newVal ? – enguerranws Feb 13 '15 at 08:29
  • `.trigger('input')` should work fine in Angular 1.2.2: http://plnkr.co/edit/tQea2bBTaOl4f552LDfU?p=preview – tasseKATT Feb 13 '15 at 16:01
  • try: angular.element(document.querySelector("input")).triggerHandler("click"); – Joe Saad Feb 13 '15 at 17:54

0 Answers0