admin管理员组

文章数量:1287656

Pardon my newbiness but I can't figure it out. Why is my $scope.new_prompt undefined when clicking submit form? I can see the variable being updated as I type (in <p>{{new_prompt}}</p>) but when I click submit, console logs 'undefined'.

View:

<div class="panel" ng-if="isAuthenticated()">
    <div class="panel-body">
        <h2 class="text-center">Add a prompt</h2>
        <form method="post" ng-submit="submitPrompt()" name="promptForm">
            <div class="form-group has-feedback">
                <input class="form-control input-lg" type="text" name="prompt" ng-model="new_prompt" placeholder="Imagine if..." required autofocus>
                <span class="ion-edit form-control-feedback"></span>
            </div>
            <p>{{new_prompt}}</p>
            <button type="submit" ng-disabled="promptForm.$invalid" class="btn btn-lg btn-block btn-success">Add prompt</button>
        </form>
    </div>
</div>

Controller:

angular.module('Prompts')
    .controller('HomeCtrl', ['$scope', '$auth', 'Prompt', '$alert', '$rootScope',
        function($scope, $auth, Prompt, $alert, $rootScope) {
            $scope.isAuthenticated = function() {
                return $auth.isAuthenticated();
            };
            $scope.submitPrompt = function() {
                console.log($scope.new_prompt);
                Prompt.submitPrompt({
                    idea: $scope.new_prompt,
                    user: $rootScope.user
                }).then(function() {
                    $alert({
                        content: 'Prompt has been added',
                        animation: 'fadeZoomFadeDown',
                        type: 'material',
                        duration: 3
                    });
                });
            };
            $scope.stories = [{
                prompt: 'Prompt 1',
                author: 'blank',
                upvotes: 0
            }, {
                prompt: 'Prompt 2',
                author: 'klanb',
                upvotes: 1
            }, {
                prompt: 'Prompt 3',
                author: 'balbunk',
                upvotes: 2
            }, ];
        }
    ]);

edit:

Ved's solution got it working. Now I don't understand why it had to be done like that when this works:

<div class="panel">
    <form ng-submit="printText()">
        <input type="text" ng-model="justTest">
        <button type="submit" class="btn"></button>
    </form>
</div>

$scope.printText = function() {
    console.log($scope.justTest)
};

Working example of edit: /

EDIT 2:

The problem lies within ng-if directive. It creates own child scope, and that's where 'new_prompt' is located, not in the parent HomeCtrl scope.

Pardon my newbiness but I can't figure it out. Why is my $scope.new_prompt undefined when clicking submit form? I can see the variable being updated as I type (in <p>{{new_prompt}}</p>) but when I click submit, console logs 'undefined'.

View:

<div class="panel" ng-if="isAuthenticated()">
    <div class="panel-body">
        <h2 class="text-center">Add a prompt</h2>
        <form method="post" ng-submit="submitPrompt()" name="promptForm">
            <div class="form-group has-feedback">
                <input class="form-control input-lg" type="text" name="prompt" ng-model="new_prompt" placeholder="Imagine if..." required autofocus>
                <span class="ion-edit form-control-feedback"></span>
            </div>
            <p>{{new_prompt}}</p>
            <button type="submit" ng-disabled="promptForm.$invalid" class="btn btn-lg btn-block btn-success">Add prompt</button>
        </form>
    </div>
</div>

Controller:

angular.module('Prompts')
    .controller('HomeCtrl', ['$scope', '$auth', 'Prompt', '$alert', '$rootScope',
        function($scope, $auth, Prompt, $alert, $rootScope) {
            $scope.isAuthenticated = function() {
                return $auth.isAuthenticated();
            };
            $scope.submitPrompt = function() {
                console.log($scope.new_prompt);
                Prompt.submitPrompt({
                    idea: $scope.new_prompt,
                    user: $rootScope.user
                }).then(function() {
                    $alert({
                        content: 'Prompt has been added',
                        animation: 'fadeZoomFadeDown',
                        type: 'material',
                        duration: 3
                    });
                });
            };
            $scope.stories = [{
                prompt: 'Prompt 1',
                author: 'blank',
                upvotes: 0
            }, {
                prompt: 'Prompt 2',
                author: 'klanb',
                upvotes: 1
            }, {
                prompt: 'Prompt 3',
                author: 'balbunk',
                upvotes: 2
            }, ];
        }
    ]);

edit:

Ved's solution got it working. Now I don't understand why it had to be done like that when this works:

<div class="panel">
    <form ng-submit="printText()">
        <input type="text" ng-model="justTest">
        <button type="submit" class="btn"></button>
    </form>
</div>

$scope.printText = function() {
    console.log($scope.justTest)
};

Working example of edit: http://jsfiddle/fuczak/dLcLkycb/

EDIT 2:

The problem lies within ng-if directive. It creates own child scope, and that's where 'new_prompt' is located, not in the parent HomeCtrl scope.

• javascript
• angularjs
• angularjs-scope

Share Improve this question Follow edited Feb 4, 2015 at 14:38 fuczak asked Feb 4, 2015 at 9:37 fuczakfuczak 6511 gold badge11 silver badge44 bronze badges 4

• Define $scope.new_prompt inside your controller. – Ved Commented Feb 4, 2015 at 9:40
• Isn't it defined in input with ng-model="new_prompt" ? – fuczak Commented Feb 4, 2015 at 9:44
• no. You need to declare it as a $scope variable. – Ved Commented Feb 4, 2015 at 9:45
• And that's why they say you should always bind to nested objects. You have to have a "." in every binding otherwise you risk binding to a scope you didn't know was there. Use controllerAs syntax if possible. Otherwise in your controller create one object on the scope and bind to attributes on that object. – SpoBo Commented Feb 4, 2015 at 16:28

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

There are two ways to solve your mistake.
case 1: Pass your model as a parameter to function:

HTML:

 <form method="post" ng-submit="submitPrompt(new_prompt)" name="promptForm">

JavaScript:

 $scope.submitPrompt = function(data) {
       $scope.new_prompt=data;
                console.log($scope.new_prompt);
                Prompt.submitPrompt({
                    idea: $scope.new_prompt,
                    user: $rootScope.user
                }).then(function() {
                    $alert({
                        content: 'Prompt has been added',
                        animation: 'fadeZoomFadeDown',
                        type: 'material',
                        duration: 3
                    });
                });
            };

CASE 2: Define: scope.new_prompt= {}, inside your controller

本文标签： javascriptAngularJS scopevariable is undefinedStack Overflow