我的ng-change没有在我的Angular/Rails应用上启动

My ng-change is not firing on my Angular/Rails app

本文关键字:我的 Rails 应用 启动 Angular ng-change      更新时间:2023-09-26

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

这里有很多东西要看,我相信你有范围问题。首先,您没有在指令上使用透传,因此您的子元素不会包含在编译的指令中。我还注意到,您在主控制器上有deleteNote,并且正在将单词委托给主控制器,但随后将updateNote放在指令上。我猜你的删除起作用了。您正在使用ng-repeat,它为每个"注释"创建子作用域。