У меня проблемы с двусторонней привязкой в AngularJS
. В моем HTML
я имею:
<div class="row" ng-app="creation">
<form class="form-horizontal" ng-controller="CreationController as cCtrl" ng-submit="cCtrl.send()" novalidate>
<div class="form-group">
<label class="col-sm-4">Model</label>
<div class="col-sm-8">
<input class="form-control" type="text" ng-model="cCtrl['data']['model']" id="model" />
</div>
</div>
...
На стороне JavaScript
меня есть:
(function() {
var app = angular.module('creation', ['validation', 'link']);
app.controller('CreationController', ['$scope', function($scope) {
$scope.data = {};
$scope.data.model = 'hello';
...
Почему $scope.data.model
не отображает привет, когда я $scope.data.model
HTML
страницу? Вместо этого он ничего не отображает, и когда я, наконец, $scope.data.model
что-то в поле ввода, он обновляет $scope.data.model
.
Это связано с тем, что вы настраиваете модель данных в области $scope
но в своем html, на который вы ссылаетесь в cCtrl
который является экземпляром контроллера. Попробуйте использовать ng-model=data.model
в html.
На самом деле синтаксис " Контроллер как " может быть очень полезным и простым в использовании. Я бы предпочел сохранить это, потому что вы можете изолировать данные по своему усмотрению и работать с ним более чистым способом.
Проблема с вашим кодом заключается в том, что вам нужно привязать объект данных к этому, а не к $ scope
(function() {
var app = angular.module('creation', ['validation', 'link']);
app.controller('CreationController', [function() {
// You can use an object to refer to *this* (vm stands for 'ViewModel').
var vm = this;
vm.data = {};
vm.data.model = 'hello';
// or just have vm.data = {model: 'hello'};
...
а затем использовать его в шаблоне, как вы его использовали.
Более того, вам не нужно вводить $ scope **, если вы не хотите использовать что-то конкретное из углового, например, дайджест или смотреть, или наследовать от родительских областей/родительских контроллеров.
Вот также хороший справочник по стилю для углового, который объясняет и другие концепции: Руководство по угловому стилю