Javascript 我的ng更改未在Angular/Rails应用程序上启动

我正在构建一个记事卡应用程序，由于某种原因，我的ng更改根本没有启动。我想不出问题出在哪里。我在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，因此您的子元素不会包含在编译指令中。我还注意到，您在主控制器上有deleteNote，并且正在将upwords委托给主控制器，但随后仅在指令上放置updateNote。我想你的删除是有效的。您使用的是ng repeat，它确实为每个“注释”创建了一个子范围

这不是因为您没有将控制器代码放入实际的控制器

MainCtrl

？还是打算将其纳入指令？如果

deleteNote

起作用，但不是

updateNote

，那可能就是它的来源。啊，好的，谢谢！我想你可能是对的。我以前也没有用过ng transclude。这是我的第二个Angular应用程序。我的删除有点正常。它删除元素，然后在没有默认文本的情况下重建元素。这真的很奇怪，但我想这只是告诉我，我需要回到我的教程。谢谢你的帮助。我觉得范围界定是个问题。@TaylorMitchell，transclude:true是在您希望指令包含任意内容时使用的，该任意内容具有ng transclude指令。有很多例子，很高兴我能帮上忙