为什么我的 ng-model 变量在控制器中未定义? [英] Why is my ng-model variable undefined in controller?

问题描述

我的 angular js 项目中的 $scope 有问题.例如，当我在输入字段上使用 ng-model="modelExample" 时，我无法在我的 js 中使用 $scope.modelExample 访问它.有没有其他人遇到过类似的问题?

I'm having trouble with $scope in my angular js project. When I use ng-model="modelExample" on an input field for example, I can't access it in my js using $scope.modelExample. Has anyone else had a similar problem?

很奇怪，调用了一个函数但 ng-model 没有绑定.请参阅下面的代码，我提交表单时会调用函数 refreshResults()，但 $scope.search 返回未定义.

It's bizarre, a function is called but ng-model doesn't bind. See my code below, the function refreshResults() is called when I submit the form but $scope.search returns as undefined.

angular.module('starter', 
    ['ionic', 
    'starter.controllers', 
    'starter.filters', 
    'akoenig.deckgrid', 
    "angucomplete",
    // 'ui.bootstrap', 
    'starter.services'])

.config(function($stateProvider, $urlRouterProvider) {
    $stateProvider
        .state('app', {
            url: "/app",
            abstract: true,
            templateUrl: "templates/menu.html",
            controller: 'AppCtrl'
        })

        .state('app.browse', {
            url: "/browse",
            views: {
                'menuContent' :{
                    templateUrl: "templates/browse.html",
                    controller: 'BrowseCtrl'
                }
            }
        })

        .state('app.search', {
            url: "/search",
            views: {
                'menuContent' :{
                    templateUrl: "templates/search.html",
                    controller: 'SearchCtrl'
                }
            }
        })
  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/app/browse');
});


angular.module('starter.controllers', [])
.controller('SearchCtrl', function($scope) {
    $scope.refreshResults = function() {
        console.log($scope.search);
    };
})


<ion-view>
    <ion-content class="has-header">
        <form ng-submit="refreshResults()" class="bar bar-header item-input-inset">
            <label class="item-input-wrapper">
                <i class="icon ion-ios7-search placeholder-icon"></i>
                <input type="search" placeholder="Search..." ng-model="search">
            </label>
        </form>
    </ion-content>
</ion-view> 

推荐答案

@DavidTryon 在评论中解决了我的问题.我使用范围错误.我需要使用一个对象而不是一个字符串.换句话说，我需要做一些类似 ng-model="search.term" 而不是 ng-model="search" 的事情，并在 js 中像这样使用它:<代码>$scope.search.term.它与继承有关，但长话短说，如果您的 ng-model 中没有点 (.)，那么您就做错了.

@DavidTryon solved my issue in the comments. I was using scope wrong. I needed to use an object not a string. In other words I need to do something like ng-model="search.term" not ng-model="search" and use it in the js like this: $scope.search.term. It has to do with inheritance but long story short, if your ng-model doesn't have a dot (.) in it, you're doing it wrong.

这里有更多信息:http://jimhoskins.com/2012/12/14/nested-scopes-in-angularjs.html

谢谢大卫！

汤姆

这篇关于为什么我的 ng-model 变量在控制器中未定义?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！