Cannot pass $scope variable / ng-model bound variable as parameter to factory function

Question

My issue: I have an input for a user to input a new tweet to post to twitter. However, when executing the function postTweet() after an ng-click, $scope.newStatus appears to be empty when it reaches the factory. (as seen in the console.log). What am I doing wrong in attempt to pass $scope.newStatus as the status parameter for the the postTweet factory function?

On a side note. If i define $scope.newStatus = 'testing 123' in the controller, it works properly.

All help is appreciated greatly.

<input type="text" ng-model="newStatus" placeholder="enter new tweet"> {{newStatus}}
<button ng-click="postTweet()">

Factory:

'use strict';
angular
    .module('m01-profile')
    .factory('Profile', [
        '$http', '$q', 'apiRef', 'Authentication', 
        function($http, $q, apiRef, Authentication) {

        var authentication = Authentication.data.authData;

        var service = {
          postTweet: function(newStatus){

            console.log(newStatus);

            var deferred = $q.defer();

            var requestObject = {
              headers: { 'Content-Type' : 'application/json' },
              token: authentication.twitter.accessToken,
              tokenSecret: authentication.twitter.accessTokenSecret,
              status: newStatus
            };

            $http.post(apiRef + 'twitter/update_status', requestObject)
              .success(function(data, status, headers, config) {

                deferred.resolve(newStatus);

              }).
              error(function(data, status, headers, config) {
                deferred.reject('Unable to post new status to twitter');

              });                    

            return deferred.promise;  

          }



        };  

        return service;

}]);

Controller

'use strict';
angular
    .module('m01-profile')
    .controller('ProfileController', [
        '$scope', '$log', 'Profile',
        function($scope, $log, Profile) {

        $scope.postTweet = function(){

          Profile.postTweet($scope.newStatus).then(function(success){

          }, function(error){


          });                                        

        };

    }
]);

I created a trivial plunker of your sample, and I can't reproduce the behavior. http://plnkr.co/edit/4nrMFiIB4strDwQtVeSF?p=preview — Claies, Jun 11 '15 at 23:38
That being said, you are using a dynamic primitive here, which could potentially be out of scope from any number of things in your code, due to JavaScript prototypical inheritance. See http://stackoverflow.com/questions/14049480/what-are-the-nuances-of-scope-prototypal-prototypical-inheritance-in-angularjs. — Claies, Jun 11 '15 at 23:41
Thank you @Claies :) I added $parent.newStatus just to check if it was an inheritance issue. It ended up being exactly that! — K.B. Choi, Jun 12 '15 at 01:43

score 0 · Answer 1 · answered Jun 12 '15 at 01:01

Try something like this:

Controller:

'use strict';
angular
    .module('m01-profile')
    .controller('ProfileController', ['$scope', '$log', 'Profile',
        function($scope, $log, Profile) {
        $scope.tweet = {
            newStatus = ''
        };

        $scope.postTweet = function(){
          Profile.postTweet($scope.tweet.newStatus).then(function(success){

          }, function(error){

          });                                        
        };
    }
]);

HTML:

<input type="text" ng-model="tweet.newStatus" placeholder="enter new tweet"> {{newStatus}}
<button ng-click="postTweet()">

As someone commented already, in order to get two-way data binding in angular you need to bind ng-model to an object property rather than a string primitive.

In your original code, the input wasn't updating $scope.newStatus variable because ng-model was bound to a string primitive.

Cannot pass $scope variable / ng-model bound variable as parameter to factory function

1 Answers1