Question

我有一堆按钮（通道），点击时每个按钮调用MainController中的一个函数，将ID作为参数传递。

与通道相邻，我有一个输入文本，我在其中插入有关特定通道ID的信息。

我的要求是将此信息及其渠道ID存储在数据库中。

这样做，我面临一个小问题。当我一个接一个地点击多个频道然后尝试输入最新频道的详细信息时，我看到为所有被逐个点击的频道插入了详细信息。我不确定，但不知何故我点击的频道，绑定在一起。我尝试使用＆＃34; unbind＆＃34;方法。虽然没有工作。

我使用的示例代码如下：

Channels = ['channel1', 'channel2', 'channnel3', 'channel4']

函数调用

<div id="grid_ch">
<button class="channel_buttons" ng-repeat="ch in Channels"  ui-sref='ChannelInfo({ch_id: ch})' ng-click='activeClickfn(ch)'>{{ ch }}</button> 
</div>

路线

$stateProvider.state('ChannelInfo',{
    url:'/ChannelInfo/:ch_id',
    controller: 'MainController'
    templateUrl:'/static/app/service/template/channel_info.html'
  })

主控制器

app.controller('MainController', ['$scope', '$state', '$stateParams', function($scope, $state, $stateParams) {    
$scope.enter_info_about_channel = function() { 
    $('#info_about_channel').css({'display':'inline-block'});
};

$scope.active_clickfn;
$scope.active_clickfn = function(channel_id){
    $scope.ch_id = channel_id;
    console.log('THE CURRENT CHANNELID IS', $scope.ch_id)
    $('#info_about_channel').live('keydown', function(e){   // e is the input which is any key you press
        console.log('ENTERING DETAILS FOR THE CHANNELID', $scope.ch_id)
        if(e.which == 13){           
            // Insert into DB, the information about the channel here
        }
    });
}]);

假设我单击channel1，然后单击channel2然后再单击channel3，然后将一些信息输入到＆＃34; enter_info_about_channel＆＃34;然后我收到以下输出。

THE CURRENT CHANNELID IS channel1   // After clicking button channel1
THE CURRENT CHANNELID IS channel2   // After clicking button channel2
THE CURRENT CHANNELID IS channel3   // After clicking button channel3

ENTERING DETAILS FOR THE CHANNELID channel1
ENTERING DETAILS FOR THE CHANNELID channel2
ENTERING DETAILS FOR THE CHANNELID channel3

然而，我想要的输出是

THE CURRENT CHANNELID IS channel1   // After clicking button channel1
THE CURRENT CHANNELID IS channel2   // After clicking button channel2
THE CURRENT CHANNELID IS channel3   // After clicking button channel3

ENTERING DETAILS FOR THE CHANNELID channel3

尽管选择了其他频道，但上述代码以某种方式绑定了所有频道。

我真的很感激任何帮助。

Answer 1

你编码的方式不是angularjs风格。除了在自定义指令中，我们不应该在agularjs代码中使用jquery。

下面是我为您创建的代码。希望它有所帮助。

var app = angular.module("app", [])
  .controller("main", function($scope) {
    $scope.title = "Channels..."
    $scope.channels = ["channel1", "channel2", "channel3"];
    $scope.activeChannel = null;
    $scope.channelData = "";
    $scope.logs = [];
    $scope.disableSaving = false;
    
    $scope.channelSelected = function(clicked) {
      $scope.activeChannel = clicked;
      $scope.logs.push("Clicked Channel " + clicked);
      attemptSave();
    }
    $scope.channelInfoOnBlur = function(clicked) {
      attemptSave();
    }

    var attemptSave = function() {

      if ($scope.activeChannel && $scope.channelData !== "") {
        $scope.logs.push("saving data for channel " + $scope.activeChannel + " as " + $scope.channelData);
        
      }
    }
  })

/* Styles go here */

.active-button {
  background-color: #4CAF50;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">

  <div ng-controller="main">
    <h1>{{title}}</h1>
    <div>

      <button class="channel_buttons" ng-class="{'active-button': activeChannel==ch}" ng-repeat="ch in channels" ui-sref='ChannelInfo({ch_id: ch})' ng-click='channelSelected(ch)'>{{ ch }}</button>
      <input placeholder="input channel info" ng-model="channelData" ng-blur="channelInfoOnBlur()" />

    </div>
    <div>Log
      <div ng-repeat="l in logs  track by $index">{{l}}</div>
    </div>
  </div>

  <div>

Answer 2

由于您使用的是AngularJS，因此您应该能够使用ngKeydown指令并将其绑定到回调。如果那是不可能的，我会使用jQuery必须附加和分离事件处理程序的'on'-method和'off'-method。您正在使用的'live'-method已被弃用。

$('#info_about_channel').off('keydown'); // remove existing keydown events
$('#info_about_channel').on('keydown', function(e){   // e is the input which is any key you press
        console.log('ENTERING DETAILS FOR THE CHANNELID', $scope.ch_id)
        if(e.which == 13){           
            // Insert into DB, the information about the channel here
        }
    });

此代码示例应该让您入门，我只需删除所有现有的＆＃39; keydown＆＃39;在为当前通道附加新的事件处理程序之前，事件处理程序（从先前的通道附加）。

解除绑定按钮：仅存储最新点击的信息

函数调用

路线

主控制器

2 个答案: