我正在尝试使用角度模型来存储它的值,并使用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'
})
})
答案 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/