Пользовательские привязки событий не работает $ переваривать правильно

Question

У меня есть эта скрипку для простого примера - http://jsfiddle.net/E7crq/4/

var app = angular.module('myapp', []); 

app.controller('TestController', function($scope) { 
     $scope.selectOption = 1; 
}); 

app.directive('selectableOption', function() { 
    return { 
     restrict: 'A', 
     link: function (scope, element, attributes) { 
      $(element[0]).on('myChange', function() { 
       scope.$digest();     
      });    
      $(element[0]).on('change', function() { 
       scope.$digest(); 
      }); 
     } 
    }; 
}); 

$('button').on('click', function() { 
    $('#mainSelect option[value=' + $(this).attr('data-value') + ']').attr('selected', 'selected'); 
    $('#mainSelect').trigger('change'); 
}); 

HTML

<div ng-app="myapp"> 
    <div ng-controller="TestController"> 
     <select ng-model="selectOption" id="mainSelect" selectable-option> 
      <option value="1">1</option>  
      <option value="2">2</option>  
      <option value="3">3</option>  
     </select> 
     <div> 
      Option: {{ selectOption }} 
     <div> 
      <button data-value="1" id="btn1">1</button> 
      <button data-value="2" id="btn2">2</button> 
      <button data-value="3" id="btn3">3</button> 
    </div> 
</div> 

Как это в настоящее время написано, если нажать на любую из 1, 2, 3 кнопок, он обновляет область действия и выбранное значение. Если вы измените событие, вызванное последней строкой кода, от 'change' до 'myChange', оно больше не работает.

Я думаю, это потому, что у Angular уже есть обработчик для события change. Что мне нужно сделать, чтобы сделать событие myChange работать?

Answer 1

Я не согласен с этой линией решения на всех, как вы поражающим как JQuery вне Угловое в чтобы сделать Угловые вещи.

Прежде всего - вы можете делать все, что захотите, в $ scope controller. Во-вторых - вы можете решить это и внутри директивы, но , пожалуйста, Использование Угловой синтаксис, если вы собираетесь кодировать в Угловом.

Я изменил jsFiddle в http://jsfiddle.net/m3DDK/1/, чтобы вы могли видеть, как избавиться от вашего jQuery. (Это зло ;-)

2 вещи отметить - ваш контроллер должен выглядеть следующим образом:

$scope.setSelected = function (e) { 
    e.preventDefault(); 
    e.stopPropagation(); 
    var valueNum = e.target.id.substr('btn'.length); 
    $scope.selectOption = valueNum; 
    $scope.$broadcast('myChange', valueNum); 
}; 

и вы HTML-код, как это:

 <div> 
      <button ng-click="setSelected($event)" id="btn1">1</button> 
      <button ng-click="setSelected($event)" id="btn2">2</button> 
      <button ng-click="setSelected($event)" id="btn3">3</button> 
     </div> 

Это может быть дополнительно очищен (если вы будете использовать ng-repeat), но я оставил это для вас.

Затем в директиве, я сделал дополнительный слушатель для события OnChange:

app.directive('selectableOption', function() { 
return { 
    restrict: 'A', 
    link: function (scope, element, attributes) { 
     scope.$on('myChange', function (event, valueNum) { 
      //angular.element(element.children()[valueNum]).attr('selected', 'selected'); 
     }); 
    } 
}; 

});

В заключение - проверьте скрипку и избавьтесь от своего jQuery. Вы не нуждаетесь в этом, Угловая только сильнее. Плюс большой совет - element внутри директивной ссылки уже является элементом jQuery.

Answer 2

Это потому, что простое изменение значения select не будет обновлять model, директива select выслушивает событие change, и когда это произойдет, обновляет модель.

В вашем случае я предлагаю вам запустить событие change внутри обработчика myChange в директиве.

app.directive('selectableOption', function() { 
    return { 
     restrict: 'A', 
     link: function (scope, element, attributes) { 
      $(element).on('myChange', function() { 
       element.trigger('change') 
      }); 
     } 
    }; 
}); 

$('button').on('click', function() { 
    $('#mainSelect').val($(this).data('value')); 
    $('#mainSelect').trigger('myChange'); 
}); 

Чтобы установить значение select, используйте .val()

Демо: Fiddle