AngularJS - 无法从ng-model到控制器获取值

时间:2015-10-08 08:25:59

标签: javascript angularjs ionic-framework ionic

我正在尝试使用角度模型来存储它的值,并使用ng-click将值传递给控制器​​。使用我当前的代码,我总是收到未定义的值。我做错了什么?

HTML

<ion-content>
    <div class="list">
        <label class="item item-input">
            <textarea ng-model="feed.status"></textarea>
        </label>
    </div>
</ion-content>

<div class="tabs tabs-icon-left">
    <a class="tab-item" ng-click="post(feed)">
        <i class="icon ion-arrow-right-b"></i>
    </a>
</div>

JavaScript - Controller

.controller("PostController", function($scope, $http, $localStorage, $location){
    $http.get("https://graph.facebook.com/v2.2/me", { params: { access_token: $localStorage.accessToken, fields: "id, location, picture", format: "json" }}).then(function(result) {
        $scope.profileData = result.data;
        console.log( result.data);
    }, function(error) {
        alert("There is a problem with your profile");
        console.log(error);
    });

    $scope.post = function(data){
        console.log(data);
    }
});

路线

.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/feeds')

$stateProvider
    .state('login', {
        url: '/',
        templateUrl: 'templates/login.html',
        controller: 'LoginController'
    })
    .state('profile', {
        url: '/profile',
        templateUrl: 'templates/profile.html',
        controller: 'ProfileController'
    })
    .state('feeds', {
        url: '/feeds',
        templateUrl: 'templates/feeds.html',
        controller: 'FeedsController'
    })
    .state('post', {
        url: '/post',
        templateUrl: 'templates/post.html',
        controller: 'PostController'
    })
})

2 个答案:

答案 0 :(得分:3)

正如评论中所提到的,我认为您的问题与范围界定有关。 ion-content指令可能使用了一个独立的范围,因此在其中设置一个值不会影响它之外的范围。

克服这些问题(以及更多)的一种方法是使用控制器作为语法。

可能发生这种情况的另一个原因是没有人正在初始化Feed对象。如果Feed未定义,则不能只执行feed.status ='sth'。您需要先初始化Feed。

尝试做类似的事情:

.state('post', {
        url: '/post',
        templateUrl: 'templates/post.html',
        controller: 'PostController',
        controllerAs: 'vm'
    })

并在您的控制器中:

.controller("PostController", function($http, $localStorage, $location){
    var vm = this;
    vm.feed = {}; //initialise feed object
    $http.get("https://graph.facebook.com/v2.2/me", { params: { access_token: $localStorage.accessToken, fields: "id, location, picture", format: "json" }}).then(function(result) {
        vm.profileData = result.data;
        console.log( result.data);
    }, function(error) {
        alert("There is a problem with your profile");
        console.log(error);
    });

    vm.post = function(data){
        console.log(data);
    }
});

并在您的模板中尝试:

<div>
<ion-content>
    <div class="list">
        <label class="item item-input">
            <textarea ng-model="vm.feed.status"></textarea>
        </label>
    </div>
</ion-content>

<div class="tabs tabs-icon-left">
    <a class="tab-item" ng-click="vm.post(vm.feed)">
        <i class="icon ion-arrow-right-b"></i>
    </a>
</div>
</div>

让我们知道它是否有效

答案 1 :(得分:0)

我认为如果你将所有内容都包含在ng-controller

,那么你的代码应该可行
<div ng-controller="MyController">
    <!-- your HTML here -->
</div>

在JSFiddle上查看:http://jsfiddle.net/gmy6gd8z/