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

标签 javascript ruby-on-rails angularjs

我正在构建记事本应用程序,但出于某种原因,我的 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/

相关文章:

javascript - 在 div 中查找子元素并使用 javascript 将它们附加到另一个子元素

ruby-on-rails - strip 化-没有提供API key ?

javascript - Angular JS ui 路由器不显示模板(没有 js 控制台错误)

javascript - Ionic2:如何打包包括css在内的外部模块?

javascript - 如何固定表格的大小,以便在调整浏览器页面大小时单元格不会挤压?

javascript - 使用 AMP HTML,是否可以从单击的元素获取 ID 或其他属性,附加它们并为 anchor 标记创建 URL?

Javascript-关联数组排序

javascript - 使用 .then 不会触发服务方法

ruby-on-rails - 在多个 Controller 中重构 "render format"

ruby-on-rails - Rails fields_for 表单未显示