如何使用 AngularJS 和 AngularFire 存储对“活动元素”的引用
How to store a reference to the "active element" using AngularJS and AngularFire?
>我有一个简单的笔记应用程序,可以在文本区域中显示笔记列表和活动的选定笔记。我希望能够在列表中选择一个注释并对其进行编辑。
在我的控制器中,我有一个"活动"变量,指向笔记列表中的项目。仅使用AngularJS就可以正常工作。如果我添加 AngularFire,每当我更改文本区域中的内容时,活动元素就不再连接。存储此活动引用是一个坏主意吗?
以下是控制器的相关部分:
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 绑定丢失。我已经稍微修改了您的代码,现在可以工作了。
http://jsfiddle.net/MXUxZ/
视图
<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>
控制器
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;
});
}
相关文章:
- 在ajax成功后,cluetip不适用于首次点击活动元素
- 我如何为列出的选项卡元素编写一个Protractor测试,它会检查它是否's是否处于活动状态
- 仅悬停一个元素(活动元素)
- 如何在Slick Carousel中获取活动中的幻灯片元素
- 活动事件上的 HTML 元素
- 如何在每次页面重新加载时更改渐变背景,同时保持光标位置元素处于活动状态
- 如何在Javascript中获取HTML页面的活动元素
- 取消:活动元素样式
- Angular Bootstrap$modal与活动背景元素
- jquery上的手风琴.我无法关闭活动元素
- 是否可以使用chrome扩展名与非活动选项卡中的内容元素进行交互
- 将“活动”类添加到父元素和子元素
- 父元素悬停/活动/聚焦时隐藏元素
- 获取活动元素之后的下一个元素
- 如何获取活动时移动的输入元素的单击事件
- 为活动 li 元素提供不同的背景
- 单击元素时,JQuery 不会更改具有“活动”类的元素
- 无法设置活动菜单元素的样式
- 当内容为空但超链接处于活动状态时删除元素
- 如何设置引导模式对话框与背景元素活动