我的 ng-change 没有在我的 Angular/Rails 应用程序上触发

Question

我正在构建一个记事卡应用程序，但由于某种原因，我的 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}}

Answer 1

这里有很多东西要看，我相信你有范围问题。一方面，您没有在指令上使用 transclude，因此您的子元素不会包含在编译的指令中。我还注意到您的主控制器上有 deleteNote 并将 upwords 委派给主控制器，但随后将 updateNote 放在指令上。我想你的删除是有效的。您正在使用 ng-repeat 它确实为每个“注释”创建了一个子范围。