我正在构建记事本应用程序,但出于某种原因,我的 ng-change 根本没有触发。我不知道是什么问题。我在 JS 中尝试了断点以验证它实际上没有触发。我敢肯定,这一定是我错过的一件小事。我只需要第二双眼睛。
这是JS
var app = angular.module('catalyst', ['faye']);
app.factory('Faye', [
'$faye', function($faye) {
return $faye("http://localhost:9292/faye");
}
]);
app.directive('stickyNote', function(Faye) {
var linker = function(scope, element, attrs) {
element.draggable({
stop: function(event, ui) {
Faye.publish('/ui/board', {
id: scope.note.id,
x: ui.position.left,
y: ui.position.top
});
}
});
Faye.subscribe('/ui/board', function(data) {
// Update if the same note
if(data.id == scope.note.id) {
element.animate({
left: data.x,
top: data.y
});
}
});
// Some DOM initiation to make it nice
element.css('left', '10px');
element.css('top', '50px');
element.hide().fadeIn();
};
var controller = function($scope) {
// Incoming
Faye.subscribe('/ui/board', function(data) {
// Update if the same note
if(data.id == $scope.note.id) {
$scope.note.title = data.title;
$scope.note.body = data.body;
}
});
// Outgoing
$scope.updateNote = function(note) {
Faye.publish('/ui/board', note);
};
$scope.deleteNote = function(id) {
$scope.ondelete({
id: id
});
};
};
return {
restrict: 'A',
link: linker,
controller: controller,
scope: {
note: '=',
ondelete: '&'
}
};
});
app.controller('MainCtrl', function($scope, Faye) {
$scope.notes = [];
// Incoming
Faye.subscribe('/ui/board', function(data) {
$scope.notes.push(data);
});
Faye.subscribe('/ui/board', function(data) {
$scope.handleDeletedNoted(data.id);
});
// Outgoing
$scope.createNote = function() {
var note = {
id: new Date().getTime(),
title: 'New Note',
body: 'Pending'
};
$scope.notes.push(note);
Faye.publish('/ui/board', note);
};
$scope.deleteNote = function(id) {
$scope.handleDeletedNoted(id);
Faye.publish('/ui/board', {id: id});
};
$scope.handleDeletedNoted = function(id) {
var oldNotes = $scope.notes,
newNotes = [];
angular.forEach(oldNotes, function(note) {
if(note.id != id) newNotes.push(note);
});
$scope.notes = newNotes;
}
});
这是ui/board.html.haml
%body{"ng-controller" => "MainCtrl"}
%nav.top-bar{"data-topbar" => ""}
%ul.title-area
%li.name
%h1
%a{:href => "#"} AngularJS CollabBoard
%li.toggle-topbar.menu-icon
%a{:href => "#"}
%span Menu
%section.top-bar-section
%ul.right
%li
%a#createButton{"ng-click" => "createNote()"} Create Note
.alert-box.success.radius.sticky-note{"ng-repeat" => "note in notes track by $index", :note => "note", :ondelete => "deleteNote(id)", "sticky-note" => ""}
%button.close{"ng-click" => "deleteNote(note.id)", :type => "button"} ×
%input.title{"ng-change" => "updateNote(note)", "ng-model" => "note.title", :type => "text"}
%textarea.body{"ng-change" => "updateNote(note)", "ng-model" => "note.body"} {{note.body}}
最佳答案
这里有很多要看的地方,我相信您遇到了范围界定问题。一方面,您没有在指令中使用 transclude,因此您的子元素不会包含在编译指令中。我还注意到您在主 Controller 上有 deleteNote 并且正在将 upwords 委托(delegate)给主 Controller 但是然后将 updateNote 放在指令上。我想你的删除工作。您正在使用 ng-repeat ,它确实为每个“注释”创建了一个子范围。
关于javascript - 我的 ng-change 没有在我的 Angular/Rails 应用程序上触发,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24985077/