双向数据绑定无法按预期的方式工作
[英]two way data binding not working as expected in angular
问题描述
I'm trying to achieve two way data binding by taking the data from the input and show it in the comment box in realtime. 
我试图通过从输入中获取数据并将其实时显示在注释框中来实现两种方式的数据绑定。
Here is my HTML Code. 这是我的HTML代码。
<body>
<div class="container">
<div class="row row-content">
<div class="col-xs-12" ng-controller="dishDetailController as dish">
<ul class="media-list">
<li class="media">
<div class="media-left media-middle">
<a href="#">
<img class="media-object img-thumbnail" ng-src="{{dish.image}}" alt="Uthapizza">
</a>
</div>
<div class="media-body">
<h2 class="media-heading">{{dish.name}}
<span class="label label-danger">{{dish.label}}</span>
<span class="badge">{{dish.price | currency}}</span>
</h2>
<p>{{dish.description}}</p>
</div>
</li>
</ul>
</div>
<div class="col-xs-9 col-xs-offset-1" ng-controller="dishDetailController as dish">
<h3>Customer Comments
<small>Sort by:
<input type="text" ng-model="dish.date">
</small>
</h3>
<blockquote ng-repeat="dish in dish.comments | orderBy: dish.date ">
<p>{{dish.rating}} stars</p>
<p>{{dish.comment}}</p>
<small>{{dish.author}} {{dish.date | date}}</small>
</blockquote>
<blockquote ng-controller="DishCommentController">
<p>{{holder.author}}</p>
<!-- achieve data binding here -->
</blockquote>
</div>
</div>
<div class="form-horizontal" role="form" name='commentForm' ng-controller="DishCommentController">
<div class="form-group">
<label class="col-xs-offset-1 col-xs-2 control-label">Your Name</label>
<div class="col-xs-5">
<input type="text" class="form-control" placeholder="Enter Your name" ng-model="holder.author">
</div>
</div>
Here is my Javascript code. 这是我的Javascript代码。
'use strict';
angular.module('confusionApp', [])
.controller('MenuController', ['$scope', function($scope) {
$scope.tab = 1;
$scope.filtText = '';
$scope.showDetails = false;
var dishes = [{
name: 'Uthapizza',
image: 'images/uthapizza.png',
category: 'mains',
label: 'Hot',
price: '4.99',
description: 'A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.',
comment: ''
},
{
name: 'Zucchipakoda',
image: 'images/zucchipakoda.png',
category: 'appetizer',
label: '',
price: '1.99',
description: 'Deep fried Zucchini coated with mildly spiced Chickpea flour batter accompanied with a sweet-tangy tamarind sauce',
comment: ''
},
{
name: 'Vadonut',
image: 'images/vadonut.png',
category: 'appetizer',
label: 'New',
price: '1.99',
description: 'A quintessential ConFusion experience, is it a vada or is it a donut?',
comment: ''
},
{
name: 'ElaiCheese Cake',
image: 'images/elaicheesecake.png',
category: 'dessert',
label: '',
price: '2.99',
description: 'A delectable, semi-sweet New York Style Cheese Cake, with Graham cracker crust and spiced with Indian cardamoms',
comment: ''
}
];
$scope.dishes = dishes;
$scope.select = function(setTab) {
$scope.tab = setTab;
if (setTab === 2) {
$scope.filtText = "appetizer";
} else if (setTab === 3) {
$scope.filtText = "mains";
} else if (setTab === 4) {
$scope.filtText = "dessert";
} else {
$scope.filtText = "";
}
};
$scope.isSelected = function(checkTab) {
return ($scope.tab === checkTab);
};
$scope.toggleDetails = function() {
$scope.showDetails = !$scope.showDetails;
};
}])
.controller('ContactController', ['$scope', function($scope) {
$scope.feedback = {
mychannel: '',
firstName: "",
lastName: "",
agree: false,
email: ""
};
$scope.channels = [{
value: 'tel',
label: 'Tel.'
}, {
value: 'Email',
label: 'Email'
}];
$scope.invalidChannelSelection = false;
}])
.controller('FeedbackController', ['$scope', function($scope) {
$scope.sendFeedback = function() {
console.log($scope.feedback);
if ($scope.feedback.agree && ($scope.feedback.mychannel == "")) {
$scope.invalidChannelSelection = true;
console.log('incorrect');
} else {
$scope.invalidChannelSelection = false;
$scope.feedback = {
mychannel: "",
firstName: "",
lastName: "",
agree: false,
email: ""
};
$scope.feedback.mychannel = "";
$scope.feedbackForm.$setPristine();
console.log($scope.feedback);
}
}
}])
.controller('dishDetailController', ['$scope', function($scope) {
var dish = {
name: 'Uthapizza',
image: 'images/uthapizza.png',
category: 'mains',
label: 'Hot',
price: '4.99',
description: 'A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.',
comments: [
{
rating: 5,
comment: "Imagine all the eatables, living in conFusion!",
author: "John Lemon",
date: "2012-10-16T17:57:28.556094Z"
}, {
rating: 4,
comment: "Sends anyone to heaven, I wish I could get my mother-in-law to eat it!",
author: "Paul McVites",
date: "2014-09-05T17:57:28.556094Z"
}, {
rating: 3,
comment: "Eat it, just eat it!",
author: "Michael Jaikishan",
date: "2015-02-13T17:57:28.556094Z"
}, {
rating: 4,
comment: "Ultimate, Reaching for the stars!",
author: "Ringo Starry",
date: "2013-12-02T17:57:28.556094Z"
}, {
rating: 5,
comment: "It's your birthday, we're gonna party!",
author: "25 Cent",
date: "2011-12-02T17:57:28.556094Z"
},
]
};
$scope.dish = dish;
dish.date = '';
}])
.controller('DishCommentController', ['$scope', function($scope) {
//Step 1: Create a JavaScript object to hold the comment from the form
$scope.holder = {
rating: 5,
author: '',
comment: ''
};
$scope.submitComment = function() {
//Step 2: This is how you record the date
$scope.date = new Date().toISOString();
// Step 3: Push your comment into the dish's comment array
$scope.dish.comments.push($scope.holder);
//Step 4: reset your form to pristine
//Step 5: reset your JavaScript object that holds your comment
}
}])
;
I unable to figure it out as to how to make it work. 我无法弄清楚如何使其工作。
1 个解决方案
解决方案1
0 2017-04-08 16:44:48
I found the answer. 我找到了答案。 The problem was that I was using too many controllers and each of them were creating different scopes. 问题是我使用了太多的控制器，并且每个控制器都创建了不同的作用域。 So, I wasn't able to achieve the result I wanted. 因此，我无法获得想要的结果。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
角度双向绑定未按预期工作 - Angular two-way binding not working as expected
角材料滑动开关上的双向绑定无法按预期工作（角 4） - Two way binding on angular material slide toggle not working as expected (Angular 4)
角度中的双向数据绑定不起作用 - Two way data binding in angular not working
角度双向数据绑定不起作用 - Angular two way data binding not working
角度2中的双向数据绑定 - two way data binding in angular 2
与Angular 1的双向数据绑定 - two way data binding with Angular 1
角日期过滤器不适用于双向数据绑定 - Angular date filter not working with two-way data binding
$ scope更新时，角向两种方式的数据绑定不起作用 - Angular two way data binding not working when $scope is updated
角度指令双向绑定不起作用 - Angular Directive Two Way Binding Not Working
Angular 1.5组件双向绑定不起作用 - Angular 1.5 Component Two Way Binding Not Working
相关标签