我有一个简单的笔记应用程序,它显示笔记列表以及文本区域中事件的选定笔记。我希望能够在列表中选择一条注释并对其进行编辑。
在我的 Controller 中,我有一个“事件”变量,它指向笔记列表中的一个项目。仅使用 AngularJS 就可以正常工作。如果我添加 AngularFire,每当我更改文本区域中的内容时,事件元素就不再连接。存储此事件引用是一个坏主意吗?
这是 Controller 的相关部分:
var notesApp = angular.module('notesApp', ['firebase']);
function NotesCtrl($scope, angularFire) {
var fireBaseUrl = new Firebase('https://mynotesapp.firebaseio.com/notes');
$scope.notes = [];
$scope.select = function (note) {
$scope.active = note;
};
angularFire(fireBaseUrl, $scope, 'notes').then(function () {
$scope.active = $scope.notes[0];
});
}
和 HTML:
<ul>
<li ng-repeat="note in notes" ng-class="{active: note == active}">
<a href="#" ng-click="select(note)">{{ note.title }}</a>
</li>
</ul>
<textarea ng-model="active.body"></textarea>
完整的示例在这里:http://jsfiddle.net/4zsMH/ .
最佳答案
因此,当您将所选注释复制到 $scope.active 时,firebase 绑定(bind)会丢失。我对你的代码做了一些修改,现在它可以工作了。
查看
<div ng-app="notesApp">
<div class="container" ng-controller="NotesCtrl">
<div class="row">
<h1>Notes</h1>
<ul class="note-list col-xs-3 nav nav-pills nav-stacked">
<li ng-repeat="note in notes" ng-class="{active: selectedIndex == $index}"><a href="#" ng-click="select($index)">{{ note.title }}</a>
</li>
<li><a href="#" ng-click="addNote()">+ Add Note</a>
</li>
</ul>
<div class="note-detail col-xs-9">
<textarea rows="20" style="width:100%" ng-model="notes[selectedIndex].body"></textarea>
</div>
</div>
</div>
</div>
Controller
var notesApp = angular.module('notesApp', ['firebase']);
function NotesCtrl($scope, angularFire) {
var fireBaseUrl = new Firebase('https://notes6754.firebaseio.com/notes');
$scope.notes = [];
$scope.select = function (note) {
$scope.selectedIndex = note;
};
$scope.addNote = function () {
var title = prompt('Note Title');
if (title) {
var note = {
title: title,
body: 'Replace me'
};
$scope.notes.push(note);
$scope.active = note;
}
};
angularFire(fireBaseUrl, $scope, 'notes').then(function () {
$scope.selectedIndex = 0;
});
}
关于javascript - 如何使用 AngularJS 和 AngularFire 存储对 "active element"的引用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18678120/